Johan Dahlin
88ede1942a
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 1m52s
19214 lines
498 KiB
CSS
19214 lines
498 KiB
CSS
/* TaskNotes Plugin Styles */
|
|
|
|
/*
|
|
This file is automatically generated by the build process.
|
|
To modify styles, edit the source files in the styles/ directory.
|
|
|
|
Source files:
|
|
|
|
Core System:
|
|
- styles/variables.css: CSS custom properties and design system variables
|
|
- styles/utilities.css: Scoped utility classes for layout, spacing, typography, and states
|
|
- styles/base.css: Basic styles, animations, card components, and layout
|
|
|
|
BEM Component Files:
|
|
- styles/task-card-bem.css: TaskCard component with proper BEM scoping
|
|
- styles/task-inline-widget.css: Inline task widget for editor with proper BEM scoping
|
|
- styles/note-card-bem.css: NoteCard component with proper BEM scoping
|
|
- styles/filter-bar-bem.css: FilterBar component with proper BEM scoping
|
|
- styles/modal-bem.css: Modal components with proper BEM scoping
|
|
|
|
BEM View Files:
|
|
- styles/task-list-view.css: TaskListView component with proper BEM scoping
|
|
- styles/calendar-view.css: CalendarView component with proper BEM scoping
|
|
- styles/kanban-view.css: KanbanView component with proper BEM scoping
|
|
- styles/agenda-view.css: AgendaView component with proper BEM scoping
|
|
- styles/pomodoro-view.css: PomodoroView component with proper BEM scoping
|
|
- styles/pomodoro-stats-view.css: PomodoroStatsView component with proper BEM scoping
|
|
- styles/settings-view.css: SettingsView component with proper BEM scoping
|
|
|
|
Run 'npm run build-css' to regenerate this file.
|
|
*/
|
|
|
|
|
|
/* ===== VARIABLES.CSS ===== */
|
|
/* Material 3 Expressive Design System Variables (2025) */
|
|
:root {
|
|
/* ================================================
|
|
SPACING SYSTEM - Optimized 4dp Grid Base for Compact Design
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive spacing tokens - more compact for desktop */
|
|
--cs-spacing-xs: 2px; /* 0.5 units - tighter for compact design */
|
|
--cs-spacing-sm: 4px; /* 1 unit - reduced base grid */
|
|
--cs-spacing-md: 8px; /* 2 units - more compact */
|
|
--cs-spacing-lg: 12px; /* 3 units - reduced from 24px */
|
|
--cs-spacing-xl: 16px; /* 4 units - more compact */
|
|
--cs-spacing-xxl: 24px; /* 6 units - significantly reduced */
|
|
|
|
/* ================================================
|
|
MATERIAL 3 EXPRESSIVE ELEVATION SYSTEM
|
|
================================================ */
|
|
|
|
/* Enhanced elevation shadows with more personality and depth */
|
|
--cs-elevation-0: none;
|
|
--cs-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
--cs-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-3: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-4: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-5: 0 6px 12px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.08);
|
|
|
|
/* Removed expressive shadow variants - rely on standard elevation system */
|
|
|
|
/* Surface container colors for elevation */
|
|
--cs-surface-container-lowest: var(--background-primary);
|
|
--cs-surface-container-low: var(--background-primary-alt);
|
|
--cs-surface-container: var(--background-secondary);
|
|
--cs-surface-container-high: var(--background-secondary-alt);
|
|
--cs-surface-container-highest: var(--background-modifier-cover);
|
|
|
|
/* ================================================
|
|
MATERIAL 3 EXPRESSIVE TYPOGRAPHY SCALE
|
|
================================================ */
|
|
|
|
/* Display - More expressive and compact for desktop use */
|
|
--cs-text-display-large: 2.75rem; /* 44px - reduced from 56px */
|
|
--cs-text-display-medium: 2.25rem; /* 36px - reduced from 45px */
|
|
--cs-text-display-small: 1.875rem; /* 30px - reduced from 36px */
|
|
|
|
/* Headlines - Optimized for desktop density */
|
|
--cs-text-headline-large: 1.75rem; /* 28px - reduced from 32px */
|
|
--cs-text-headline-medium: 1.5rem; /* 24px - reduced from 28px */
|
|
--cs-text-headline-small: 1.25rem; /* 20px - reduced from 24px */
|
|
|
|
/* Titles - Compact yet readable */
|
|
--cs-text-title-large: 1.125rem; /* 18px - reduced from 22px */
|
|
--cs-text-title-medium: 0.875rem; /* 14px - reduced from 16px */
|
|
--cs-text-title-small: 0.75rem; /* 12px - reduced from 14px */
|
|
|
|
/* Body - Optimized for readability and compactness */
|
|
--cs-text-body-large: 0.875rem; /* 14px - reduced from 16px */
|
|
--cs-text-body-medium: 0.75rem; /* 12px - reduced from 14px */
|
|
--cs-text-body-small: 0.6875rem; /* 11px - slightly reduced */
|
|
|
|
/* Labels - Compact component text */
|
|
--cs-text-label-large: 0.75rem; /* 12px - reduced from 14px */
|
|
--cs-text-label-medium: 0.6875rem; /* 11px - slightly reduced */
|
|
--cs-text-label-small: 0.625rem; /* 10px - more compact */
|
|
|
|
/* Legacy typography for compatibility */
|
|
--cs-text-xs: var(--cs-text-label-small);
|
|
--cs-text-sm: var(--cs-text-label-medium);
|
|
--cs-text-base: var(--cs-text-body-medium);
|
|
--cs-text-md: var(--cs-text-body-large);
|
|
--cs-text-lg: var(--cs-text-title-medium);
|
|
--cs-text-xl: var(--cs-text-title-large);
|
|
--cs-text-2xl: var(--cs-text-headline-small);
|
|
|
|
/* ================================================
|
|
EXPRESSIVE BORDER RADIUS SYSTEM
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive corner radius tokens - more dynamic and personality-driven */
|
|
--cs-radius-xs: 2px; /* Extra small - more subtle */
|
|
--cs-radius-sm: 6px; /* Small - slightly more rounded */
|
|
--cs-radius-md: 10px; /* Medium - more organic feel */
|
|
--cs-radius-lg: 14px; /* Large - enhanced personality */
|
|
--cs-radius-xl: 20px; /* Extra large - more expressive */
|
|
--cs-radius-xxl: 28px; /* Extra extra large - bold expression */
|
|
--cs-radius-full: 50%; /* Full/pill - unchanged */
|
|
|
|
/* Removed expressive radius variations - keep consistent radius system */
|
|
|
|
/* ================================================
|
|
COMPACT COMPONENT SIZING
|
|
================================================ */
|
|
|
|
/* Touch targets - Optimized for desktop with compact design */
|
|
--cs-touch-target: 36px; /* Reduced from 48px for compactness */
|
|
--cs-touch-target-lg: 44px; /* Reduced from 56px */
|
|
--cs-touch-target-dense: 28px; /* More compact dense layouts */
|
|
|
|
/* Button heights - More compact for desktop */
|
|
--cs-button-height-sm: 24px; /* Reduced from 32px */
|
|
--cs-button-height-md: 32px; /* Reduced from 40px */
|
|
--cs-button-height-lg: var(--cs-touch-target);
|
|
|
|
/* Input heights - Compact but usable */
|
|
--cs-input-height-sm: 24px; /* Reduced from 32px */
|
|
--cs-input-height-md: 32px; /* Reduced from 40px */
|
|
--cs-input-height-lg: var(--cs-touch-target);
|
|
|
|
/* Icon sizes - Proportionally adjusted */
|
|
--cs-icon-sm: 14px; /* Reduced from 16px */
|
|
--cs-icon-md: 20px; /* Reduced from 24px */
|
|
--cs-icon-lg: 28px; /* Reduced from 32px */
|
|
|
|
/* ================================================
|
|
EXPRESSIVE MOTION PHYSICS SYSTEM
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive motion tokens - enhanced with spatial springs */
|
|
--cs-motion-duration-instant: 25ms; /* Near-instant feedback */
|
|
--cs-motion-duration-short1: 75ms; /* Very quick interactions */
|
|
--cs-motion-duration-short2: 120ms; /* Quick interactions */
|
|
--cs-motion-duration-short3: 180ms; /* Standard interactions */
|
|
--cs-motion-duration-short4: 240ms; /* Slightly longer interactions */
|
|
--cs-motion-duration-medium1: 300ms; /* Medium duration */
|
|
--cs-motion-duration-medium2: 360ms; /* Medium-long duration */
|
|
--cs-motion-duration-medium3: 420ms; /* Longer interactions */
|
|
--cs-motion-duration-medium4: 480ms; /* Long interactions */
|
|
--cs-motion-duration-long1: 540ms; /* Very long interactions */
|
|
--cs-motion-duration-long2: 600ms; /* Extra long */
|
|
|
|
/* Enhanced easing curves for more natural, physics-based motion */
|
|
--cs-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
|
|
--cs-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--cs-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
--cs-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
--cs-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
--cs-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
--cs-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
|
|
/* Simplified motion system - keep only essential easing curves */
|
|
--cs-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
|
|
|
/* Simplified transition tokens */
|
|
--cs-transition-instant: var(--cs-motion-duration-instant) var(--cs-motion-easing-standard);
|
|
--cs-transition-fast: var(--cs-motion-duration-short2) var(--cs-motion-easing-standard);
|
|
--cs-transition-normal: var(--cs-motion-duration-short3) var(--cs-motion-easing-spring);
|
|
--cs-transition-slow: var(--cs-motion-duration-medium1) var(--cs-motion-easing-emphasized);
|
|
|
|
/* ================================================
|
|
STATE SYSTEM
|
|
================================================ */
|
|
|
|
/* Opacity values for different states */
|
|
--cs-state-hover: 0.08;
|
|
--cs-state-focus: 0.12;
|
|
--cs-state-pressed: 0.16;
|
|
--cs-state-dragged: 0.16;
|
|
--cs-state-disabled: 0.38;
|
|
|
|
/* ================================================
|
|
Z-INDEX SYSTEM
|
|
================================================ */
|
|
|
|
/* Layer hierarchy for proper stacking */
|
|
--cs-z-base: 0;
|
|
--cs-z-sticky: 100;
|
|
--cs-z-fixed: 200;
|
|
--cs-z-overlay: 300;
|
|
--cs-z-dropdown: 1000;
|
|
--cs-z-tooltip: 2000;
|
|
--cs-z-modal: 3000;
|
|
--cs-z-notification: 4000;
|
|
|
|
/* Simplified Color System - Rely more on theme colors */
|
|
/* Only define colors when theme doesn't provide suitable alternatives */
|
|
|
|
/* Blue scale for notes and information */
|
|
--cs-blue-100: rgba(59, 130, 246, 0.1); /* Light blue background for scheduled tasks */
|
|
--cs-blue-300: var(--color-blue, #60a5fa);
|
|
--cs-blue-400: var(--color-blue, #3b82f6);
|
|
--cs-blue-500: var(--color-blue, #2563eb);
|
|
|
|
/* Purple scale for special items */
|
|
--cs-purple-100: rgba(139, 92, 246, 0.1); /* Light purple background for daily notes */
|
|
--cs-purple-300: var(--color-purple, #a78bfa);
|
|
--cs-purple-400: var(--color-purple, #8b5cf6);
|
|
--cs-purple-500: var(--color-purple, #7c3aed);
|
|
|
|
/* Use theme's muted colors */
|
|
--cs-gray-100: rgba(107, 114, 128, 0.1); /* Light gray background for archived tasks */
|
|
--cs-gray-300: var(--background-modifier-border);
|
|
--cs-gray-400: var(--background-modifier-border-hover);
|
|
--cs-gray-500: var(--text-muted);
|
|
--cs-gray-600: var(--text-faint);
|
|
|
|
/* Red and green gradient colors for due dates and completed tasks */
|
|
--cs-red-100: rgba(239, 68, 68, 0.1); /* Light red background for due tasks */
|
|
--cs-green-100: rgba(34, 197, 94, 0.1); /* Light green background for completed tasks */
|
|
|
|
/* Fixed semantic usage for UI elements (not user-customizable) */
|
|
/* Notes heatmap - blue intensities for calendar */
|
|
--cs-color-notes-light: var(--cs-blue-300);
|
|
--cs-color-notes-medium: var(--cs-blue-400);
|
|
--cs-color-notes-heavy: var(--cs-blue-500);
|
|
|
|
/* Special item colors (daily notes, recurring) */
|
|
--cs-color-daily-note: var(--cs-purple-300);
|
|
--cs-color-recurring: var(--cs-purple-400);
|
|
|
|
/* Archived/inactive content */
|
|
--cs-color-archived: var(--cs-gray-500);
|
|
|
|
/* Note: Status and Priority colors are user-customizable via settings */
|
|
/* They are injected as CSS variables: --status-{value}-color and --priority-{value}-color */
|
|
/* Default fallbacks for when custom colors aren't loaded yet */
|
|
--cs-color-status-fallback: var(--text-muted);
|
|
--cs-color-priority-fallback: var(--text-muted);
|
|
|
|
/* Legacy component sizing - using updated values from above */
|
|
|
|
/* Z-index scale */
|
|
--cs-z-dropdown: 1000;
|
|
--cs-z-modal: 2000;
|
|
--cs-z-tooltip: 3000;
|
|
|
|
/* Shadow system */
|
|
--cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--cs-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
--cs-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--cs-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* ================================================
|
|
TASKNOTES PLUGIN SCOPED VARIABLES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin {
|
|
/* ================================================
|
|
SCOPED THEME INTEGRATION
|
|
================================================ */
|
|
|
|
/* Base & Text Colors - Map to Obsidian theme variables */
|
|
--tn-bg-primary: var(--background-primary);
|
|
--tn-bg-secondary: var(--background-secondary);
|
|
--tn-bg-primary-alt: var(--background-primary-alt, var(--background-primary));
|
|
--tn-bg-secondary-alt: var(--background-secondary-alt, var(--background-secondary));
|
|
--tn-text-normal: var(--text-normal);
|
|
--tn-text-muted: var(--text-muted);
|
|
--tn-text-faint: var(--text-faint);
|
|
--tn-text-accent: var(--interactive-accent);
|
|
|
|
/* Borders & Dividers - Map to Obsidian theme variables */
|
|
--tn-border-color: var(--background-modifier-border);
|
|
--tn-border-color-hover: var(--background-modifier-border-hover);
|
|
--tn-border-color-focus: var(--background-modifier-border-focus);
|
|
--tn-border-color-interactive: var(--interactive-accent);
|
|
|
|
/* Interactive States - Map to Obsidian theme variables */
|
|
--tn-interactive-normal: var(--interactive-normal);
|
|
--tn-interactive-hover: color-mix(in srgb, var(--tn-interactive-accent) 8%, transparent);
|
|
--tn-interactive-accent: var(--interactive-accent);
|
|
--tn-interactive-accent-hover: var(--interactive-accent-hover);
|
|
--tn-interactive-success: var(--interactive-success);
|
|
|
|
/* Semantic Colors - Use Obsidian's color palette when available */
|
|
--tn-color-success: var(--color-green, #00aa00);
|
|
--tn-color-warning: var(--color-yellow, #ffa500);
|
|
--tn-color-error: var(--color-red, #ff0000);
|
|
--tn-color-info: var(--color-blue, #0066cc);
|
|
--tn-color-overdue: var(--color-red, #ff0000);
|
|
|
|
/* ================================================
|
|
SCOPED SPACING SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-spacing-xs: var(--cs-spacing-xs);
|
|
--tn-spacing-sm: var(--cs-spacing-sm);
|
|
--tn-spacing-md: var(--cs-spacing-md);
|
|
--tn-spacing-lg: var(--cs-spacing-lg);
|
|
--tn-spacing-xl: var(--cs-spacing-xl);
|
|
--tn-spacing-xxl: var(--cs-spacing-xxl);
|
|
|
|
/* ================================================
|
|
SCOPED TYPOGRAPHY SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-font-size-xs: var(--cs-text-label-small);
|
|
--tn-font-size-sm: var(--cs-text-label-medium);
|
|
--tn-font-size-md: var(--cs-text-body-medium);
|
|
--tn-font-size-lg: var(--cs-text-body-large);
|
|
--tn-font-size-xl: var(--cs-text-title-medium);
|
|
--tn-font-size-2xl: var(--cs-text-title-large);
|
|
|
|
/* Typography weights and styles */
|
|
--tn-font-weight-normal: 400;
|
|
--tn-font-weight-medium: 500;
|
|
--tn-font-weight-semibold: 600;
|
|
--tn-font-weight-bold: 700;
|
|
|
|
/* ================================================
|
|
SCOPED BORDERS & SHADOWS (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-radius-xs: var(--cs-radius-xs);
|
|
--tn-radius-sm: var(--cs-radius-sm);
|
|
--tn-radius-md: var(--cs-radius-md);
|
|
--tn-radius-lg: var(--cs-radius-lg);
|
|
--tn-radius-xl: var(--cs-radius-xl);
|
|
--tn-radius-full: var(--cs-radius-full);
|
|
|
|
--tn-shadow-light: var(--cs-elevation-1);
|
|
--tn-shadow-medium: var(--cs-elevation-2);
|
|
--tn-shadow-strong: var(--cs-elevation-3);
|
|
--tn-shadow-hover: var(--cs-elevation-4);
|
|
|
|
/* ================================================
|
|
SCOPED MOTION SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-transition-fast: var(--cs-transition-fast);
|
|
--tn-transition-normal: var(--cs-transition-normal);
|
|
--tn-transition-slow: var(--cs-transition-slow);
|
|
|
|
/* ================================================
|
|
SCOPED COMPONENT SIZING (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-button-height-sm: var(--cs-button-height-sm);
|
|
--tn-button-height-md: var(--cs-button-height-md);
|
|
--tn-button-height-lg: var(--cs-button-height-lg);
|
|
|
|
--tn-input-height-sm: var(--cs-input-height-sm);
|
|
--tn-input-height-md: var(--cs-input-height-md);
|
|
--tn-input-height-lg: var(--cs-input-height-lg);
|
|
|
|
--tn-icon-sm: var(--cs-icon-sm);
|
|
--tn-icon-md: var(--cs-icon-md);
|
|
--tn-icon-lg: var(--cs-icon-lg);
|
|
|
|
/* ================================================
|
|
SCOPED Z-INDEX SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-z-base: var(--cs-z-base);
|
|
--tn-z-sticky: var(--cs-z-sticky);
|
|
--tn-z-dropdown: var(--cs-z-dropdown);
|
|
--tn-z-modal: var(--cs-z-modal);
|
|
--tn-z-tooltip: var(--cs-z-tooltip);
|
|
--tn-z-notification: var(--cs-z-notification);
|
|
|
|
/* ================================================
|
|
PLUGIN-SPECIFIC VARIABLES
|
|
================================================ */
|
|
|
|
/* Status & Priority colors are dynamically injected by StatusManager & PriorityManager */
|
|
/* These are fallbacks for when dynamic colors aren't loaded yet */
|
|
--tn-color-status-fallback: var(--tn-text-muted);
|
|
--tn-color-priority-fallback: var(--tn-text-muted);
|
|
|
|
/* Special component colors */
|
|
--tn-color-archived: var(--cs-color-archived);
|
|
--tn-color-daily-note: var(--cs-color-daily-note);
|
|
--tn-color-recurring: var(--cs-color-recurring);
|
|
|
|
/* Calendar and heatmap colors */
|
|
--tn-color-notes-light: var(--cs-color-notes-light);
|
|
--tn-color-notes-medium: var(--cs-color-notes-medium);
|
|
--tn-color-notes-heavy: var(--cs-color-notes-heavy);
|
|
}
|
|
|
|
/* ===== UTILITIES.CSS ===== */
|
|
/* ================================================
|
|
TASKNOTES SCOPED UTILITY CLASSES
|
|
================================================
|
|
|
|
This file contains a comprehensive set of utility classes for the
|
|
ChronoSync/TaskNotes plugin. All utilities are properly scoped under
|
|
.tasknotes-plugin and follow the established naming conventions.
|
|
|
|
Naming Convention: .tn-{property}-{value}
|
|
All utilities use --tn- CSS variables for consistency
|
|
|
|
Categories:
|
|
- Layout Utilities (flexbox, grid, positioning)
|
|
- Spacing Utilities (margin, padding, gap)
|
|
- Typography Utilities (text alignment, font styles)
|
|
- Display Utilities (visibility, display types)
|
|
- Background & Border Utilities
|
|
- State Utilities (hover, focus, loading)
|
|
- Animation Utilities
|
|
|
|
================================================ */
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - FLEXBOX
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-inline {
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Flex Direction */
|
|
.tasknotes-plugin .tn-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
/* Flex Wrap */
|
|
.tasknotes-plugin .tn-flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-wrap-reverse {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
/* Justify Content */
|
|
.tasknotes-plugin .tn-justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-evenly {
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
/* Align Items */
|
|
.tasknotes-plugin .tn-items-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Align Self */
|
|
.tasknotes-plugin .tn-self-auto {
|
|
align-self: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-start {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-end {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-center {
|
|
align-self: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-stretch {
|
|
align-self: stretch;
|
|
}
|
|
|
|
/* Flex Growth and Shrink */
|
|
.tasknotes-plugin .tn-flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-initial {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-none {
|
|
flex: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grow-0 {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Common Flex Combinations */
|
|
.tasknotes-plugin .tn-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-around {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-evenly {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-between {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - GRID
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-inline {
|
|
display: inline-grid;
|
|
}
|
|
|
|
/* Grid Template Columns */
|
|
.tasknotes-plugin .tn-grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-5 {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-7 {
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-12 {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Grid Template Rows */
|
|
.tasknotes-plugin .tn-grid-rows-1 {
|
|
grid-template-rows: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-2 {
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-3 {
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-4 {
|
|
grid-template-rows: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Grid Column Span */
|
|
.tasknotes-plugin .tn-col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Grid Row Span */
|
|
.tasknotes-plugin .tn-row-span-1 {
|
|
grid-row: span 1 / span 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-2 {
|
|
grid-row: span 2 / span 2;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-3 {
|
|
grid-row: span 3 / span 3;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-full {
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - POSITIONING
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-static {
|
|
position: static;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-relative {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sticky {
|
|
position: sticky;
|
|
}
|
|
|
|
/* Positioning Values */
|
|
.tasknotes-plugin .tn-inset-0 {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-top-0 {
|
|
top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-right-0 {
|
|
right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bottom-0 {
|
|
bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-left-0 {
|
|
left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-top-auto {
|
|
top: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-right-auto {
|
|
right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bottom-auto {
|
|
bottom: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-left-auto {
|
|
left: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - MARGIN
|
|
================================================ */
|
|
|
|
/* All sides */
|
|
.tasknotes-plugin .tn-m-0 {
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-xs {
|
|
margin: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-sm {
|
|
margin: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-md {
|
|
margin: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-lg {
|
|
margin: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-xl {
|
|
margin: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-auto {
|
|
margin: auto;
|
|
}
|
|
|
|
/* Horizontal */
|
|
.tasknotes-plugin .tn-mx-0 {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-xs {
|
|
margin-left: var(--tn-spacing-xs);
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-sm {
|
|
margin-left: var(--tn-spacing-sm);
|
|
margin-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-md {
|
|
margin-left: var(--tn-spacing-md);
|
|
margin-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-lg {
|
|
margin-left: var(--tn-spacing-lg);
|
|
margin-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-xl {
|
|
margin-left: var(--tn-spacing-xl);
|
|
margin-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Vertical */
|
|
.tasknotes-plugin .tn-my-0 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-xs {
|
|
margin-top: var(--tn-spacing-xs);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-sm {
|
|
margin-top: var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-md {
|
|
margin-top: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-lg {
|
|
margin-top: var(--tn-spacing-lg);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-xl {
|
|
margin-top: var(--tn-spacing-xl);
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-auto {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
/* Individual sides */
|
|
.tasknotes-plugin .tn-mt-0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-xs {
|
|
margin-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-sm {
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-md {
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-lg {
|
|
margin-top: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-xl {
|
|
margin-top: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-auto {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-0 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-xs {
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-sm {
|
|
margin-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-md {
|
|
margin-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-lg {
|
|
margin-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-xl {
|
|
margin-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-auto {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-0 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-xs {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-sm {
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-md {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-lg {
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-xl {
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-auto {
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-xs {
|
|
margin-left: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-sm {
|
|
margin-left: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-md {
|
|
margin-left: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-lg {
|
|
margin-left: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-xl {
|
|
margin-left: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-auto {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - PADDING
|
|
================================================ */
|
|
|
|
/* All sides */
|
|
.tasknotes-plugin .tn-p-0 {
|
|
padding: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-xs {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-sm {
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-md {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-lg {
|
|
padding: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-xl {
|
|
padding: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Horizontal */
|
|
.tasknotes-plugin .tn-px-0 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-xs {
|
|
padding-left: var(--tn-spacing-xs);
|
|
padding-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-sm {
|
|
padding-left: var(--tn-spacing-sm);
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-md {
|
|
padding-left: var(--tn-spacing-md);
|
|
padding-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-lg {
|
|
padding-left: var(--tn-spacing-lg);
|
|
padding-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-xl {
|
|
padding-left: var(--tn-spacing-xl);
|
|
padding-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Vertical */
|
|
.tasknotes-plugin .tn-py-0 {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-xs {
|
|
padding-top: var(--tn-spacing-xs);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-sm {
|
|
padding-top: var(--tn-spacing-sm);
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-md {
|
|
padding-top: var(--tn-spacing-md);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-lg {
|
|
padding-top: var(--tn-spacing-lg);
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-xl {
|
|
padding-top: var(--tn-spacing-xl);
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Individual sides */
|
|
.tasknotes-plugin .tn-pt-0 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-xs {
|
|
padding-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-sm {
|
|
padding-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-md {
|
|
padding-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-lg {
|
|
padding-top: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-xl {
|
|
padding-top: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-0 {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-xs {
|
|
padding-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-sm {
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-md {
|
|
padding-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-lg {
|
|
padding-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-xl {
|
|
padding-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-0 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-xs {
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-sm {
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-md {
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-lg {
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-xl {
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-0 {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-xs {
|
|
padding-left: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-sm {
|
|
padding-left: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-md {
|
|
padding-left: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-lg {
|
|
padding-left: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-xl {
|
|
padding-left: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - GAP
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-gap-0 {
|
|
gap: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-xs {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-sm {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-md {
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-lg {
|
|
gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-xl {
|
|
gap: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Column Gap */
|
|
.tasknotes-plugin .tn-gap-x-0 {
|
|
column-gap: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-xs {
|
|
column-gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-sm {
|
|
column-gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-md {
|
|
column-gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-lg {
|
|
column-gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-xl {
|
|
column-gap: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Row Gap */
|
|
.tasknotes-plugin .tn-gap-y-0 {
|
|
row-gap: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-xs {
|
|
row-gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-sm {
|
|
row-gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-md {
|
|
row-gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-lg {
|
|
row-gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-xl {
|
|
row-gap: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* ================================================
|
|
DISPLAY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-inline {
|
|
display: inline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table {
|
|
display: table;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table-row {
|
|
display: table-row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table-cell {
|
|
display: table-cell;
|
|
}
|
|
|
|
/* ================================================
|
|
VISIBILITY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-collapse {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* ================================================
|
|
TYPOGRAPHY UTILITIES
|
|
================================================ */
|
|
|
|
/* Text Alignment */
|
|
.tasknotes-plugin .tn-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Font Weight */
|
|
.tasknotes-plugin .tn-font-thin {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-normal {
|
|
font-weight: var(--tn-font-weight-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-medium {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-semibold {
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-bold {
|
|
font-weight: var(--tn-font-weight-bold);
|
|
}
|
|
|
|
/* Font Size */
|
|
.tasknotes-plugin .tn-text-xs {
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-sm {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-base {
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-lg {
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-xl {
|
|
font-size: var(--tn-font-size-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-2xl {
|
|
font-size: var(--tn-font-size-2xl);
|
|
}
|
|
|
|
/* Text Transform */
|
|
.tasknotes-plugin .tn-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-normal-case {
|
|
text-transform: none;
|
|
}
|
|
|
|
/* Text Decoration */
|
|
.tasknotes-plugin .tn-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-line-through {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-no-underline {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Line Height */
|
|
.tasknotes-plugin .tn-leading-none {
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-tight {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-snug {
|
|
line-height: 1.375;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-normal {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-relaxed {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-loose {
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Text Colors */
|
|
.tasknotes-plugin .tn-text-normal {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-muted {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-faint {
|
|
color: var(--tn-text-faint);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-accent {
|
|
color: var(--tn-text-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-success {
|
|
color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-warning {
|
|
color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-error {
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-info {
|
|
color: var(--tn-color-info);
|
|
}
|
|
|
|
/* ================================================
|
|
BACKGROUND UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-bg-primary {
|
|
background-color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-secondary {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-accent {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-success {
|
|
background-color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-warning {
|
|
background-color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-error {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-info {
|
|
background-color: var(--tn-color-info);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-transparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ================================================
|
|
BORDER UTILITIES
|
|
================================================ */
|
|
|
|
/* Border Width */
|
|
.tasknotes-plugin .tn-border-0 {
|
|
border-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-2 {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-t {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-r {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-b {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-l {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
/* Border Style */
|
|
.tasknotes-plugin .tn-border-solid {
|
|
border-style: solid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-dashed {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-dotted {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-none {
|
|
border-style: none;
|
|
}
|
|
|
|
/* Border Color */
|
|
.tasknotes-plugin .tn-border-normal {
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-hover {
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-accent {
|
|
border-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-success {
|
|
border-color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-warning {
|
|
border-color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-error {
|
|
border-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-transparent {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Border Radius */
|
|
.tasknotes-plugin .tn-rounded-none {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-xs {
|
|
border-radius: var(--tn-radius-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-sm {
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-md {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-lg {
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-xl {
|
|
border-radius: var(--tn-radius-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-full {
|
|
border-radius: var(--tn-radius-full);
|
|
}
|
|
|
|
/* Individual corner radius */
|
|
.tasknotes-plugin .tn-rounded-t-sm {
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-r-sm {
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-b-sm {
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-l-sm {
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
SHADOW UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-shadow-none {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-light {
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow {
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-medium {
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-strong {
|
|
box-shadow: var(--tn-shadow-strong);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-hover {
|
|
box-shadow: var(--tn-shadow-hover);
|
|
}
|
|
|
|
/* ================================================
|
|
OVERFLOW UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-overflow-auto {
|
|
overflow: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-visible {
|
|
overflow: visible;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-scroll {
|
|
overflow: scroll;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-auto {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-hidden {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-scroll {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-auto {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-hidden {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-scroll {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* ================================================
|
|
SIZE UTILITIES
|
|
================================================ */
|
|
|
|
/* Width */
|
|
.tasknotes-plugin .tn-w-auto {
|
|
width: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-screen {
|
|
width: 100vw;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-min {
|
|
width: min-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-max {
|
|
width: max-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-fit {
|
|
width: fit-content;
|
|
}
|
|
|
|
/* Specific widths */
|
|
.tasknotes-plugin .tn-w-0 {
|
|
width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-px {
|
|
width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-1 {
|
|
width: 0.25rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-2 {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-4 {
|
|
width: 1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-8 {
|
|
width: 2rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-12 {
|
|
width: 3rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-16 {
|
|
width: 4rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-20 {
|
|
width: 5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-24 {
|
|
width: 6rem;
|
|
}
|
|
|
|
/* Height */
|
|
.tasknotes-plugin .tn-h-auto {
|
|
height: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-full {
|
|
height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-min {
|
|
height: min-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-max {
|
|
height: max-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-fit {
|
|
height: fit-content;
|
|
}
|
|
|
|
/* Specific heights */
|
|
.tasknotes-plugin .tn-h-0 {
|
|
height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-px {
|
|
height: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-1 {
|
|
height: 0.25rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-2 {
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-4 {
|
|
height: 1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-8 {
|
|
height: 2rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-12 {
|
|
height: 3rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-16 {
|
|
height: 4rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-20 {
|
|
height: 5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-24 {
|
|
height: 6rem;
|
|
}
|
|
|
|
/* Min/Max Width */
|
|
.tasknotes-plugin .tn-min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-min-w-full {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-xs {
|
|
max-width: 20rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-sm {
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-md {
|
|
max-width: 28rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-lg {
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-xl {
|
|
max-width: 36rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-full {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-none {
|
|
max-width: none;
|
|
}
|
|
|
|
/* Min/Max Height */
|
|
.tasknotes-plugin .tn-min-h-0 {
|
|
min-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-min-h-full {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-h-full {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-h-screen {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
/* ================================================
|
|
Z-INDEX UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-z-0 {
|
|
z-index: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-10 {
|
|
z-index: 10;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-20 {
|
|
z-index: 20;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-30 {
|
|
z-index: 30;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-40 {
|
|
z-index: 40;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-50 {
|
|
z-index: 50;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-auto {
|
|
z-index: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-sticky {
|
|
z-index: var(--tn-z-sticky);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-dropdown {
|
|
z-index: var(--tn-z-dropdown);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-modal {
|
|
z-index: var(--tn-z-modal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-tooltip {
|
|
z-index: var(--tn-z-tooltip);
|
|
}
|
|
|
|
/* ================================================
|
|
CURSOR UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-cursor-auto {
|
|
cursor: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-default {
|
|
cursor: default;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-pointer {
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-wait {
|
|
cursor: wait;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-text {
|
|
cursor: text;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-move {
|
|
cursor: move;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-help {
|
|
cursor: help;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-grab {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ================================================
|
|
USER SELECT UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-select-none {
|
|
user-select: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-text {
|
|
user-select: text;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-all {
|
|
user-select: all;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-auto {
|
|
user-select: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
POINTER EVENTS UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pointer-events-auto {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
TRANSITIONS UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-transition-none {
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-fast {
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition {
|
|
transition: all var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-slow {
|
|
transition: all var(--tn-transition-slow);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-colors {
|
|
transition: color var(--tn-transition-normal), background-color var(--tn-transition-normal), border-color var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-opacity {
|
|
transition: opacity var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-transform {
|
|
transition: transform var(--tn-transition-normal);
|
|
}
|
|
|
|
/* ================================================
|
|
TRANSFORM UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-transform {
|
|
transform: var(--tw-transform);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transform-none {
|
|
transform: none;
|
|
}
|
|
|
|
/* Scale */
|
|
.tasknotes-plugin .tn-scale-0 {
|
|
--tw-scale-x: 0;
|
|
--tw-scale-y: 0;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-50 {
|
|
--tw-scale-x: 0.5;
|
|
--tw-scale-y: 0.5;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-75 {
|
|
--tw-scale-x: 0.75;
|
|
--tw-scale-y: 0.75;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-90 {
|
|
--tw-scale-x: 0.9;
|
|
--tw-scale-y: 0.9;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-95 {
|
|
--tw-scale-x: 0.95;
|
|
--tw-scale-y: 0.95;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-100 {
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-105 {
|
|
--tw-scale-x: 1.05;
|
|
--tw-scale-y: 1.05;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-110 {
|
|
--tw-scale-x: 1.1;
|
|
--tw-scale-y: 1.1;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-125 {
|
|
--tw-scale-x: 1.25;
|
|
--tw-scale-y: 1.25;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
/* ================================================
|
|
OPACITY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-opacity-0 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-25 {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-50 {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-75 {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ================================================
|
|
STATE UTILITIES
|
|
================================================ */
|
|
|
|
/* Loading State */
|
|
.tasknotes-plugin .tn-loading {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px 0 0 -8px;
|
|
border: 2px solid currentColor;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: tn-spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Disabled State */
|
|
.tasknotes-plugin .tn-disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Interactive States */
|
|
.tasknotes-plugin .tn-hover-opacity:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-shadow:hover {
|
|
box-shadow: var(--tn-shadow-hover);
|
|
}
|
|
|
|
/* Focus States */
|
|
.tasknotes-plugin .tn-focus-ring:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ================================================
|
|
ANIMATION UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-animate-spin {
|
|
animation: tn-spin 1s linear infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-pulse {
|
|
animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-bounce {
|
|
animation: tn-bounce 1s infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-fade-in {
|
|
animation: tn-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
|
animation: tn-slide-up 0.3s ease-out;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes tn-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes tn-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes tn-bounce {
|
|
0%, 100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes tn-fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes tn-slide-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
ACCESSIBILITY UTILITIES
|
|
================================================ */
|
|
|
|
/* Screen Reader Only */
|
|
.tasknotes-plugin .tn-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;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-not-sr-only {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE UTILITIES (MOBILE-FIRST)
|
|
================================================ */
|
|
|
|
/* Small screens (tablets, 768px and up) */
|
|
@media (min-width: 768px) {
|
|
.tasknotes-plugin .tn-sm-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* Medium screens (desktops, 992px and up) */
|
|
@media (min-width: 992px) {
|
|
.tasknotes-plugin .tn-md-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* Large screens (large desktops, 1200px and up) */
|
|
@media (min-width: 1200px) {
|
|
.tasknotes-plugin .tn-lg-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
DARK MODE SUPPORT
|
|
================================================ */
|
|
|
|
/* Dark mode specific utilities */
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-primary {
|
|
background-color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-secondary {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-normal {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-muted {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-border-normal {
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
|
|
/* ================================================
|
|
REDUCED MOTION SUPPORT
|
|
================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .tn-transition-fast,
|
|
.tasknotes-plugin .tn-transition,
|
|
.tasknotes-plugin .tn-transition-slow,
|
|
.tasknotes-plugin .tn-transition-colors,
|
|
.tasknotes-plugin .tn-transition-opacity,
|
|
.tasknotes-plugin .tn-transition-transform {
|
|
transition: none !important;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-spin,
|
|
.tasknotes-plugin .tn-animate-pulse,
|
|
.tasknotes-plugin .tn-animate-bounce,
|
|
.tasknotes-plugin .tn-animate-fade-in,
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
|
animation: none !important;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
HIGH CONTRAST SUPPORT
|
|
================================================ */
|
|
|
|
@media (prefers-contrast: high) {
|
|
.tasknotes-plugin .tn-border {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus,
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
outline-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
BUTTON UTILITIES - SCOPED FOR SETTINGS ONLY
|
|
================================================ */
|
|
|
|
/* Base Button - Scoped to settings modal */
|
|
.mod-settings .tasknotes-plugin .tn-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border: none;
|
|
border-radius: var(--tn-radius-md);
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1;
|
|
cursor: var(--cursor);
|
|
user-select: none;
|
|
text-decoration: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
transition: all var(--tn-transition-fast);
|
|
min-height: var(--tn-button-height-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:active {
|
|
opacity: 0.8;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:focus-visible {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:disabled {
|
|
opacity: var(--cs-state-disabled);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.mod-settings .tasknotes-plugin .tn-btn--sm {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
min-height: var(--tn-button-height-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--lg {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
min-height: var(--tn-button-height-lg);
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
/* Button Variants */
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary:hover {
|
|
background: var(--tn-interactive-accent-hover);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary {
|
|
background: var(--tn-interactive-normal);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost {
|
|
background: transparent;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger {
|
|
background: transparent;
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger:hover {
|
|
background: var(--tn-color-error);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success {
|
|
background: transparent;
|
|
color: var(--tn-color-success);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success:hover {
|
|
background: var(--tn-color-success);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
/* Icon-only buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon {
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
padding: 0;
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--sm {
|
|
width: var(--tn-button-height-sm);
|
|
height: var(--tn-button-height-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--lg {
|
|
width: var(--tn-button-height-lg);
|
|
height: var(--tn-button-height-lg);
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
/* Pill buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--pill {
|
|
border-radius: var(--tn-radius-full);
|
|
}
|
|
|
|
/* Full width buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--full {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Button Groups */
|
|
.mod-settings .tasknotes-plugin .tn-btn-group {
|
|
display: flex;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group .tn-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached {
|
|
gap: 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:first-child {
|
|
border-radius: var(--tn-radius-md) 0 0 var(--tn-radius-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:last-child {
|
|
border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:only-child {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
/* Loading state */
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading {
|
|
position: relative;
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px 0 0 -8px;
|
|
border: 2px solid currentColor;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: tn-spin 0.8s linear infinite;
|
|
}
|
|
|
|
|
|
/* ================================================
|
|
CODEMIRROR WIDGET UTILITIES
|
|
================================================ */
|
|
|
|
/**
|
|
* Widget Cursor Fix
|
|
*
|
|
* Minimal fix for CodeMirror widget artifacts.
|
|
* Only prevents editing inside widgets and hides visual artifacts.
|
|
* Does NOT hide the editor cursor to preserve normal editing experience.
|
|
*
|
|
* Fixes:
|
|
* - Prevents text selection inside widgets
|
|
* - Prevents contenteditable behavior
|
|
* - Hides widget buffer image artifacts
|
|
*
|
|
* Trade-offs:
|
|
* - Cursor may appear next to widgets (acceptable for normal editing UX)
|
|
* - Widget buffer artifacts are hidden
|
|
*
|
|
* Usage: Add .cm-widget-cursor-fix to your widget container element
|
|
*/
|
|
.cm-widget-cursor-fix {
|
|
/* Prevent text selection and editing inside widget */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
|
|
/* Prevent contenteditable behavior */
|
|
-webkit-user-modify: read-only;
|
|
-moz-user-modify: read-only;
|
|
|
|
/* Ensure no text cursor appears inside widget elements */
|
|
caret-color: transparent;
|
|
}
|
|
|
|
/* Hide CodeMirror widgetBuffer image artifacts only */
|
|
.cm-content > .cm-line:has(.cm-widget-cursor-fix) img.cm-widgetBuffer {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* ===== BASE.CSS ===== */
|
|
/* Reduced motion support - scope to TaskNotes components only */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-container *,
|
|
.tasknotes-card *,
|
|
.tasknotes-button * {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Button click feedback - scope to TaskNotes buttons only */
|
|
.tasknotes-container button:active:not(:disabled),
|
|
.tasknotes-button:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Performance optimization animations */
|
|
@keyframes tn-task-flash {
|
|
0% {
|
|
background-color: var(--interactive-accent-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes tn-task-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
@keyframes tn-task-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes tn-tracking-pulse {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
/* Task update animations */
|
|
.tasknotes-plugin .task-flash {
|
|
animation: tn-task-flash 1500ms ease-out;
|
|
}
|
|
|
|
.tasknotes-plugin .task-pulse {
|
|
animation: tn-task-pulse 1000ms ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .task-fade-in {
|
|
animation: tn-task-fade-in 300ms ease-out;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== TASK-CARD-BEM.CSS ===== */
|
|
/* =================================================================
|
|
TASKCARD COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
|
|
================================================================= */
|
|
|
|
/* All TaskCard styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
.tasknotes-plugin .task-card {
|
|
/* Layout & Structure */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
position: relative;
|
|
|
|
/* Spacing & Sizing - Refined spacing for better visual breathing room */
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
margin-bottom: 1px;
|
|
|
|
/* Visual Styling - Subtle depth with minimal shadow */
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: var(--tn-radius-xs);
|
|
box-shadow: none;
|
|
|
|
/* Interactions & Accessibility - Smooth transitions */
|
|
transition: all var(--tn-transition-fast);
|
|
outline: none;
|
|
role: listitem;
|
|
tabindex: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Prevent parent hover when hovering over subtasks or blocking tasks */
|
|
.tasknotes-plugin .task-card:has(.task-card__subtasks:hover, .task-card__blocking:hover) {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:focus {
|
|
background-color: var(--background-modifier-hover);
|
|
outline: 2px solid var(--background-modifier-border-focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Remove border radius for cleaner list appearance */
|
|
.tasknotes-plugin .task-card:first-child,
|
|
.tasknotes-plugin .task-card:last-child,
|
|
.tasknotes-plugin .task-card:first-child:last-child {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
TASKCARD ELEMENTS (BEM __element)
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .task-card__main-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__title {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
transition: color var(--tn-transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__title-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: 3px 8px;
|
|
border-radius: var(--tn-radius-md);
|
|
font-size: var(--tn-font-size-sm);
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--background-modifier-border);
|
|
transition: background var(--tn-transition-fast), border-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill--blocked {
|
|
background: color-mix(in srgb, var(--tn-color-error) 75%, var(--tn-bg-primary));
|
|
color: var(--tn-bg-primary);
|
|
border-color: color-mix(in srgb, var(--tn-color-error) 85%, var(--tn-bg-primary));
|
|
padding-inline: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill--blocked:hover {
|
|
background: var(--tn-color-error);
|
|
color: var(--tn-bg-primary);
|
|
border-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill--blocking {
|
|
background: transparent;
|
|
color: var(--tn-color-error);
|
|
border-color: color-mix(in srgb, var(--tn-color-error) 70%, transparent);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .task-card__tag {
|
|
background: var(--tn-bg-secondary);
|
|
color: var(--tn-text-muted);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border-radius: var(--tn-radius-xs);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 400;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__due-date {
|
|
color: var(--tn-color-success);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 400;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-xs);
|
|
background: color-mix(in srgb, var(--tn-color-success) 15%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__due-date--overdue {
|
|
color: var(--tn-color-error);
|
|
background: color-mix(in srgb, var(--tn-color-error) 15%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__due-date--today {
|
|
color: var(--tn-color-warning);
|
|
background: color-mix(in srgb, var(--tn-color-warning) 15%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__priority-badge {
|
|
display: none; /* Hide priority badges in favor of dots */
|
|
}
|
|
|
|
/* Simplified info display - no progressive disclosure for Todoist style */
|
|
|
|
/* Drag handle indicator */
|
|
.tasknotes-plugin .task-card__drag-handle {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 20px;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
var(--tn-text-faint) 0px,
|
|
var(--tn-text-faint) 2px,
|
|
transparent 2px,
|
|
transparent 4px
|
|
);
|
|
opacity: 0;
|
|
transition: opacity var(--tn-transition-fast);
|
|
border-radius: var(--tn-radius-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card[draggable="true"]:hover .task-card__drag-handle {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card[draggable="true"]:active .task-card__drag-handle {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Container queries for adaptive layouts */
|
|
@container (max-width: 300px) {
|
|
.tasknotes-plugin .task-card {
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__quick-actions {
|
|
gap: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__quick-action {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__status-dot {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
border: 2px solid color-mix(in srgb, var(--tn-border-color) 80%, transparent);
|
|
background-color: transparent;
|
|
transition: all var(--tn-transition-fast);
|
|
position: relative;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__status-dot:hover {
|
|
background-color: color-mix(in srgb, var(--next-status-color, var(--tn-interactive-accent)) 30%, transparent);
|
|
border-color: var(--next-status-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
/* Completed status - filled circle with status color */
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot {
|
|
background-color: var(--current-status-color, var(--tn-color-success));
|
|
border-color: var(--current-status-color, var(--tn-color-success));
|
|
box-shadow: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot:hover {
|
|
background-color: color-mix(in srgb, var(--next-status-color, var(--tn-interactive-accent)) 50%, var(--current-status-color, var(--tn-color-success)));
|
|
border-color: var(--next-status-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
/* Completion animation - subtle pulse when task is completed */
|
|
@keyframes status-complete {
|
|
0% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 color-mix(in srgb, var(--current-status-color, var(--tn-color-success)) 40%, transparent);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
box-shadow: 0 0 0 6px color-mix(in srgb, var(--current-status-color, var(--tn-color-success)) 0%, transparent);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--completed.task-card--just-completed > .task-card__main-row .task-card__status-dot {
|
|
animation: status-complete 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Status dot with icon mode - uses Lucide icons from theme */
|
|
.tasknotes-plugin .task-card__status-dot--icon {
|
|
border: none;
|
|
background-color: transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__status-dot--icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: var(--current-status-color, var(--tn-text-muted));
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__status-dot--icon:hover svg {
|
|
color: var(--next-status-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
/* Completed state for icon mode */
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon svg {
|
|
color: var(--current-status-color, var(--tn-color-success));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon:hover svg {
|
|
color: var(--next-status-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
/* =================================================================
|
|
BADGE AREA - Groups secondary indicators (recurring, reminder, project)
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .task-card__badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Hide badges container when empty */
|
|
.tasknotes-plugin .task-card__badges:empty {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__recurring-indicator {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-muted);
|
|
opacity: 0.7;
|
|
display: none; /* Hidden by default, shown via modifier */
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--tn-transition-fast);
|
|
border-radius: var(--tn-radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__recurring-indicator:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__recurring-indicator svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Recurrence instance statistics pills */
|
|
.tasknotes-plugin .task-card__metadata-pill--completed-instances {
|
|
color: var(--text-success);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-pill--skipped-instances {
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Reminder indicator */
|
|
.tasknotes-plugin .task-card__reminder-indicator {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-muted);
|
|
opacity: 0.7;
|
|
transition: all var(--tn-transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--tn-radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__reminder-indicator:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__reminder-indicator svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Project indicator */
|
|
.tasknotes-plugin .task-card__project-indicator {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-muted);
|
|
opacity: 0.7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--tn-radius-sm);
|
|
transition: all var(--tn-transition-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-indicator:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-indicator svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Chevron for expandable subtasks */
|
|
.tasknotes-plugin .task-card__chevron {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-muted);
|
|
opacity: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--tn-radius-sm);
|
|
transition: all var(--tn-transition-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__chevron:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* In left mode, chevrons are always visible (like group chevrons) */
|
|
.tasknotes-plugin .task-card.task-card--chevron-left .task-card__chevron {
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: calc(-1 * var(--tn-spacing-lg) - 14px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:hover .task-card__chevron {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__chevron svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
transition: transform var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__chevron--expanded svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Blocking toggle */
|
|
.tasknotes-plugin .task-card__blocking-toggle {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-muted);
|
|
opacity: 0.8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color var(--tn-transition-fast), background var(--tn-transition-fast), opacity var(--tn-transition-fast);
|
|
border-radius: var(--tn-radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking-toggle:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking-toggle svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking-toggle--expanded {
|
|
color: var(--interactive-accent);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking-toggle.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Left-position variant for subtask chevron */
|
|
.tasknotes-plugin .task-card.task-card--chevron-left {
|
|
/* Reserve gutter for chevron plus spacing */
|
|
padding-left: calc(var(--tn-spacing-lg) + 20px);
|
|
}
|
|
|
|
/* Ensure nested cards in left mode also reserve chevron gutter */
|
|
.tasknotes-plugin .task-card__subtasks .task-card.task-card--chevron-left {
|
|
padding-left: calc(var(--tn-spacing-md) + 20px);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__subtasks {
|
|
margin-left: 24px;
|
|
margin-top: 6px;
|
|
border-left: 2px solid color-mix(in srgb, var(--tn-border-color) 40%, transparent);
|
|
padding-left: 14px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__subtasks::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -2px;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, var(--tn-interactive-accent) 30%, transparent),
|
|
transparent
|
|
);
|
|
opacity: 0;
|
|
transition: opacity var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:hover .task-card__subtasks::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__subtasks .task-card {
|
|
margin-bottom: 3px;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__subtasks .task-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--subtask {
|
|
background: color-mix(in srgb, var(--tn-bg-secondary) 25%, transparent);
|
|
border-radius: var(--tn-radius-sm);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking {
|
|
margin-left: 24px;
|
|
margin-top: 6px;
|
|
border-left: 2px dashed color-mix(in srgb, var(--tn-color-error) 30%, transparent);
|
|
padding-left: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -2px;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, var(--tn-color-error) 30%, transparent),
|
|
transparent
|
|
);
|
|
opacity: 0;
|
|
transition: opacity var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:hover .task-card__blocking::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--dependency {
|
|
background: color-mix(in srgb, var(--tn-color-error) 4%, transparent);
|
|
border-radius: var(--tn-radius-sm);
|
|
border-left: 2px solid color-mix(in srgb, var(--tn-color-error) 20%, transparent);
|
|
padding-left: calc(var(--tn-spacing-md) - 2px);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__blocking-loading,
|
|
.tasknotes-plugin .task-card__blocking-empty {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--subtask:hover {
|
|
background: color-mix(in srgb, var(--tn-interactive-hover) 60%, var(--tn-bg-secondary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__subtasks-loading {
|
|
margin-left: 20px;
|
|
margin-top: 4px;
|
|
padding: var(--tn-spacing-sm);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__context-menu {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--tn-text-faint);
|
|
opacity: 0;
|
|
transition: all var(--tn-transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--tn-radius-sm);
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__context-menu:hover {
|
|
color: var(--tn-text-normal);
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:hover .task-card__context-menu {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__context-menu:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__context-menu svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Quick actions removed for Todoist-style simplicity */
|
|
|
|
/* =====================================================================
|
|
HOVER CONTEXT MENU INTERACTIONS
|
|
===================================================================== */
|
|
|
|
|
|
/* Enhanced priority dot hover for context menu */
|
|
.tasknotes-plugin .task-card__priority-dot {
|
|
transition: all var(--tn-transition-fast);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__priority-dot:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Hoverable date text elements */
|
|
.tasknotes-plugin .task-card__metadata-date {
|
|
transition: all var(--tn-transition-fast);
|
|
border-radius: var(--tn-radius-sm);
|
|
padding: 3px 6px;
|
|
margin: -3px -6px;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-date:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-date--due:hover {
|
|
background: color-mix(in srgb, var(--tn-color-error) 12%, transparent);
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata-date--scheduled:hover {
|
|
background: color-mix(in srgb, var(--tn-color-info) 12%, transparent);
|
|
color: var(--tn-color-info);
|
|
}
|
|
|
|
/* Overdue due dates - use the hover background color for text */
|
|
.tasknotes-plugin .task-card__metadata-date--overdue {
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
/* Past scheduled dates - use the hover background color for text */
|
|
.tasknotes-plugin .task-card__metadata-date--past {
|
|
color: var(--tn-color-info);
|
|
}
|
|
|
|
/* Project links */
|
|
.tasknotes-plugin .task-card__project-link {
|
|
color: var(--interactive-accent);
|
|
text-decoration: none;
|
|
transition: all var(--tn-transition-fast);
|
|
border-radius: var(--tn-radius-sm);
|
|
padding: 2px 4px;
|
|
margin: -2px -4px;
|
|
display: inline-block;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-link:hover,
|
|
.tasknotes-plugin .task-card__project-link:focus {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--interactive-accent-hover);
|
|
outline: none;
|
|
box-shadow: 0 2px 4px color-mix(in srgb, var(--tn-shadow-color, black) 8%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-link:focus {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 30%, transparent),
|
|
0 2px 4px color-mix(in srgb, var(--tn-shadow-color, black) 8%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-link.internal-link {
|
|
/* Ensure consistent styling with Obsidian's internal links */
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__project-link.internal-link:hover,
|
|
.tasknotes-plugin .task-card__project-link.internal-link:focus {
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
|
|
/* =================================================================
|
|
TASKCARD MODIFIERS (BEM --modifier)
|
|
================================================================= */
|
|
|
|
/* Completion State - Use theme colors */
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__title {
|
|
text-decoration: line-through;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
/* Skipped State - Muted appearance for skipped recurring instances */
|
|
.tasknotes-plugin .task-card--skipped {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--skipped > .task-card__main-row .task-card__title {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--skipped > .task-card__main-row .task-card__status-dot {
|
|
background-color: rgba(128, 128, 128, 0.4);
|
|
border-color: var(--text-faint);
|
|
border-style: dashed;
|
|
}
|
|
|
|
/* Archived State */
|
|
.tasknotes-plugin .task-card--archived {
|
|
opacity: 0.5;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Active Time Tracking */
|
|
.tasknotes-plugin .task-card--actively-tracked {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--actively-tracked::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
border: 2px solid var(--tn-color-info);
|
|
border-radius: var(--tn-radius-xs);
|
|
opacity: 0.6;
|
|
animation: pulse-tracking 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-tracking {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
/* Recurring Task */
|
|
.tasknotes-plugin .task-card--recurring .task-card__recurring-indicator {
|
|
display: flex;
|
|
}
|
|
|
|
/* Skipped recurring instance styling */
|
|
.tasknotes-plugin .recurring-skipped,
|
|
.tasknotes-plugin .task-card--recurring-skipped {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-skipped .task-card__title,
|
|
.tasknotes-plugin .task-card--recurring-skipped .task-card__title {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Priority indicators - Use user's priority settings */
|
|
.tasknotes-plugin .task-card__priority-dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background-color: var(--priority-color, transparent);
|
|
margin: 0 var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* Dynamic priority colors using CSS variables set by PriorityManager */
|
|
/* Use child combinator (>) to prevent subtasks from inheriting parent priority styling */
|
|
.tasknotes-plugin .task-card[data-priority] > .task-card__main-row .task-card__priority-dot {
|
|
background-color: var(--current-priority-color, var(--tn-text-muted));
|
|
}
|
|
|
|
/* Fallback priority colors using existing system */
|
|
/* Use child combinator (>) to prevent subtasks from inheriting parent priority styling */
|
|
.tasknotes-plugin .task-card--priority-high > .task-card__main-row .task-card__priority-dot {
|
|
background-color: var(--priority-high-color, var(--tn-color-error));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--priority-medium > .task-card__main-row .task-card__priority-dot {
|
|
background-color: var(--priority-medium-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--priority-normal > .task-card__main-row .task-card__priority-dot {
|
|
background-color: var(--priority-normal-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--priority-low > .task-card__main-row .task-card__priority-dot {
|
|
background-color: var(--priority-low-color, var(--tn-text-muted));
|
|
}
|
|
|
|
/* Status colors - Use dynamic status colors from user settings */
|
|
/* Use child combinator (>) to prevent subtasks from inheriting parent status styling */
|
|
.tasknotes-plugin .task-card[data-status] > .task-card__main-row .task-card__status-dot {
|
|
border-color: var(--current-status-color, var(--tn-border-color));
|
|
}
|
|
|
|
|
|
/* Minimal animations - Use theme colors */
|
|
.tasknotes-plugin .task-card--updated {
|
|
background-color: var(--tn-interactive-hover);
|
|
transition: background-color var(--tn-transition-fast);
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
/* Mobile & Touch Devices - Use theme colors */
|
|
@media (pointer: coarse) {
|
|
.tasknotes-plugin .task-card {
|
|
padding: 12px 16px;
|
|
min-height: 44px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card:active {
|
|
background-color: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* Larger touch targets */
|
|
.tasknotes-plugin .task-card__context-menu {
|
|
width: 24px;
|
|
height: 24px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__context-menu svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Larger status dots for touch */
|
|
.tasknotes-plugin .task-card__status-dot {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
/* High density displays */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
.tasknotes-plugin .task-card {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card::before {
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .task-card,
|
|
.tasknotes-plugin .task-card *,
|
|
.tasknotes-plugin .task-card::before,
|
|
.tasknotes-plugin .task-card::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--dragging {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.tasknotes-plugin .task-card {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
background: white !important;
|
|
box-shadow: none !important;
|
|
border: 1px solid #ccc !important;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__quick-actions,
|
|
.tasknotes-plugin .task-card__context-menu,
|
|
.tasknotes-plugin .task-card__enhanced-info {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Compact mode for smaller screens - Todoist style */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .task-card {
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__content {
|
|
gap: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card__metadata {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
TASKCARD DRAG AND DROP STATES
|
|
================================================================= */
|
|
|
|
/* Draggable task cards */
|
|
.tasknotes-plugin .task-card[draggable="true"] {
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card[draggable="true"]:hover {
|
|
cursor: grab;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px color-mix(in srgb, var(--tn-shadow-color) 15%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card[draggable="true"]:active {
|
|
cursor: grabbing;
|
|
transform: scale(0.98) rotate(1deg);
|
|
}
|
|
|
|
/* Enhanced dragging state */
|
|
.tasknotes-plugin .task-card--dragging {
|
|
opacity: 0.8;
|
|
transform: rotate(5deg) scale(1.02);
|
|
cursor: grabbing;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
box-shadow: 0 8px 32px color-mix(in srgb, var(--tn-shadow-color) 30%, transparent),
|
|
0 0 0 1px color-mix(in srgb, var(--tn-interactive-accent) 50%, transparent);
|
|
transition: none;
|
|
animation: drag-pulse 2s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes drag-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 8px 32px color-mix(in srgb, var(--tn-shadow-color) 30%, transparent),
|
|
0 0 0 1px color-mix(in srgb, var(--tn-interactive-accent) 50%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow: 0 12px 40px color-mix(in srgb, var(--tn-shadow-color) 40%, transparent),
|
|
0 0 0 2px color-mix(in srgb, var(--tn-interactive-accent) 70%, transparent);
|
|
}
|
|
}
|
|
|
|
/* Drag preview ghost */
|
|
.tasknotes-plugin .task-card--drag-ghost {
|
|
opacity: 0.3;
|
|
transform: scale(0.95);
|
|
transition: all var(--tn-transition-fast);
|
|
pointer-events: none;
|
|
filter: blur(1px);
|
|
}
|
|
|
|
/* Drop zone feedback */
|
|
.tasknotes-plugin .task-card--drop-target {
|
|
border: 2px dashed var(--tn-interactive-accent);
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 5%, var(--tn-bg-primary));
|
|
transform: scale(1.02);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--drop-target::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: var(--tn-radius-sm);
|
|
background: linear-gradient(
|
|
45deg,
|
|
transparent 25%,
|
|
color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 25%,
|
|
color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 50%,
|
|
transparent 50%,
|
|
transparent 75%,
|
|
color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 75%
|
|
);
|
|
background-size: 8px 8px;
|
|
animation: drop-zone-shimmer 1s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes drop-zone-shimmer {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 8px 8px; }
|
|
}
|
|
|
|
/* =================================================================
|
|
LAYOUT MODIFIERS - Inline Mode for Task Link Widgets
|
|
================================================================= */
|
|
|
|
/* Inline layout - single line, compact display for editor task links */
|
|
.tasknotes-plugin .task-card--layout-inline {
|
|
/* Use inline display to respect line boundaries */
|
|
display: inline !important;
|
|
|
|
/* Minimal padding - no indentation needed in inline mode */
|
|
padding: 2px 0;
|
|
margin: 0;
|
|
margin-bottom: 0;
|
|
|
|
/* Visual style - transparent background */
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
|
|
/* Size constraints */
|
|
min-height: auto;
|
|
|
|
/* Prevent text from breaking into multiple lines */
|
|
white-space: nowrap;
|
|
|
|
/* Force inline behavior */
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Disable drag cursor for inline tasks - they're not draggable */
|
|
.tasknotes-plugin .task-card--layout-inline[draggable="true"]:hover {
|
|
cursor: default;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline[draggable="true"]:active {
|
|
cursor: default;
|
|
transform: none;
|
|
}
|
|
|
|
/* Remove chevron gutter padding in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline,
|
|
.tasknotes-plugin .task-card--layout-inline.task-card--chevron-left {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* Main row in inline mode - horizontal layout */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__main-row {
|
|
display: inline !important;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Content in inline mode - horizontal, truncated */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__content {
|
|
display: inline !important;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Title in inline mode - truncate with ellipsis */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__title {
|
|
display: inline !important;
|
|
font-size: inherit; /* Use editor's font size */
|
|
font-weight: 400;
|
|
margin: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Title text in inline mode - ensure ellipsis works */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__title-text {
|
|
display: inline !important;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Metadata in inline mode - stays on same line, scrolls if needed */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata {
|
|
display: inline-block !important;
|
|
font-size: var(--tn-font-size-sm);
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: text-bottom;
|
|
position: relative;
|
|
top: -0.15em;
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Only apply spacing and min-width when metadata has content - prevents blank space when empty */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata:not(:empty) {
|
|
margin-left: 0.5em;
|
|
min-width: min(30%, 300px);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata:hover {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--background-modifier-border) transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar {
|
|
height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata:hover::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Wrapper for metadata items in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata > * {
|
|
display: inline;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata > *:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Smaller status dot in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__status-dot {
|
|
display: inline-block;
|
|
width: 0.85em;
|
|
height: 0.85em;
|
|
margin-right: 0.25em;
|
|
border-width: 1.5px;
|
|
vertical-align: baseline;
|
|
transform: translateY(0.1em);
|
|
}
|
|
|
|
/* Smaller priority dot in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__priority-dot {
|
|
display: inline-block;
|
|
width: 0.6em;
|
|
height: 0.6em;
|
|
margin: 0 0.25em 0 0;
|
|
border-width: 1.5px;
|
|
vertical-align: baseline;
|
|
transform: translateY(0.05em);
|
|
}
|
|
|
|
/* Compact indicators in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__recurring-indicator,
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__reminder-indicator {
|
|
display: inline-block;
|
|
position: static;
|
|
width: 0.85em;
|
|
height: 0.85em;
|
|
margin-right: 0.15em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Compact context menu in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__context-menu {
|
|
display: inline-block;
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
padding: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Compact date displays in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-date {
|
|
display: inline;
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: 0;
|
|
margin: 0 0.75em 0 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Metadata property in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-property {
|
|
display: inline;
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: 0;
|
|
margin: 0 0.75em 0 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Metadata pills in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-pill {
|
|
display: inline;
|
|
margin: 0 0.75em 0 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Metadata separators in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-separator {
|
|
display: inline;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* SVG icons in inline mode - ensure they don't affect line height */
|
|
.tasknotes-plugin .task-card--layout-inline svg {
|
|
display: inline-block;
|
|
width: 0.85em;
|
|
height: 0.85em;
|
|
vertical-align: baseline;
|
|
transform: translateY(0.1em);
|
|
}
|
|
|
|
/* Hide subtask-related elements in inline mode */
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__subtasks,
|
|
.tasknotes-plugin .task-card--layout-inline .task-card__blocking {
|
|
display: none;
|
|
}
|
|
|
|
/* Ensure inline cards don't have bottom margin */
|
|
.tasknotes-plugin .task-card--layout-inline:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
COMPACT LAYOUT (for future use)
|
|
================================================================= */
|
|
|
|
/* Compact layout - smaller padding but still vertical */
|
|
.tasknotes-plugin .task-card--layout-compact {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__main-row {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__title {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__metadata {
|
|
font-size: var(--tn-font-size-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__status-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__priority-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin: 0 var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__badges {
|
|
gap: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__recurring-indicator,
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__reminder-indicator,
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__project-indicator,
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__chevron,
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__blocking-toggle {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--layout-compact .task-card__context-menu {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* =================================================================
|
|
SELECTION MODE STYLES
|
|
================================================================= */
|
|
|
|
|
|
/* Selected task card styling */
|
|
.tasknotes-plugin .task-card--selected {
|
|
background-color: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-card--selected:hover {
|
|
background-color: color-mix(in srgb, var(--interactive-accent) 20%, transparent);
|
|
}
|
|
|
|
/* Primary selected task (first selected) gets a border */
|
|
.tasknotes-plugin .task-card--selected-primary {
|
|
box-shadow: inset 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
|
|
/* Selection indicator floating badge */
|
|
.tasknotes-plugin .tn-selection-indicator {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 8px 16px;
|
|
border-radius: var(--tn-radius-md);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--tn-shadow-color, black) 20%, transparent);
|
|
z-index: 100;
|
|
display: none;
|
|
animation: tn-selection-indicator-appear 0.2s ease-out;
|
|
transition: background-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-selection-indicator:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
@keyframes tn-selection-indicator-appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Kanban card wrapper selection state */
|
|
.tasknotes-plugin .kanban-view__card-wrapper--selected {
|
|
background-color: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* Primary selected kanban card wrapper gets a border */
|
|
.tasknotes-plugin .kanban-view__card-wrapper--selected-primary {
|
|
box-shadow: inset 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
|
|
/* ===== TASK-INLINE-WIDGET.CSS ===== */
|
|
/* =================================================================
|
|
INLINE TASK WIDGET STYLES - BEM NAMING CONVENTION & PROPER SCOPING
|
|
================================================================= */
|
|
|
|
/* All inline task widget styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
/* =================================================================
|
|
INLINE TASK LINK WIDGET WRAPPER
|
|
================================================================= */
|
|
|
|
/* Wrapper for inline task link widgets - ensures proper inline display with bullets */
|
|
.tasknotes-plugin.tasknotes-inline-widget {
|
|
display: inline !important;
|
|
vertical-align: baseline;
|
|
line-height: inherit;
|
|
/* Prevent wrapper from causing line breaks */
|
|
white-space: normal;
|
|
}
|
|
|
|
/* =================================================================
|
|
INLINE TASK PREVIEW STYLES (Editor Widgets)
|
|
================================================================= */
|
|
|
|
/* Standalone inline task preview widget */
|
|
.tasknotes-plugin .task-inline-preview {
|
|
/* Layout - inline flexbox for proper element alignment */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
|
|
/* Typography - match editor font */
|
|
font-size: var(--editor-font-size, 16px);
|
|
font-family: var(--editor-font-family, var(--font-interface));
|
|
|
|
/* Visual styling - clean text appearance */
|
|
padding: 2px 4px;
|
|
|
|
/* Interactivity */
|
|
cursor: var(--cursor);
|
|
|
|
/* Prevent text selection issues */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
/* Ensure proper vertical alignment with text */
|
|
vertical-align: baseline;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Hide when cursor is on the same line */
|
|
.tasknotes-plugin .task-inline-preview.task-inline-preview--cursor-hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Status indicator dot - match task card styling */
|
|
.tasknotes-plugin .task-inline-preview__status-dot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--tn-border-color);
|
|
background-color: transparent;
|
|
transition: all 0.2s ease;
|
|
cursor: var(--cursor);
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin-right: 6px; /* More gap between status and priority */
|
|
transform: translateY(2px); /* Lower the status circle slightly for better visual alignment */
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__status-dot:hover {
|
|
border-color: var(--tn-text-muted);
|
|
box-shadow: 0 0 6px rgba(100, 149, 237, 0.4);
|
|
transform: translateY(2px) scale(1.1); /* Maintain the lowered position while scaling */
|
|
}
|
|
|
|
/* Priority indicator dot - filled solid circle */
|
|
.tasknotes-plugin .task-inline-preview__priority-dot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--tn-text-muted);
|
|
border: none;
|
|
flex-shrink: 0;
|
|
margin-right: 6px; /* Gap between priority and title */
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
/* Date info styling */
|
|
.tasknotes-plugin .task-inline-preview__date {
|
|
opacity: 0.7;
|
|
font-size: 0.9em;
|
|
transition: opacity 0.15s ease;
|
|
flex-shrink: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Clickable date styling */
|
|
.tasknotes-plugin .task-inline-preview__date--clickable {
|
|
cursor: var(--cursor);
|
|
border-radius: 3px;
|
|
padding: 1px 3px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__date--clickable:hover {
|
|
opacity: 1;
|
|
background-color: var(--background-modifier-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Date icon styling */
|
|
.tasknotes-plugin .task-inline-preview__date-icon {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
transition: opacity 0.15s ease;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Fix Lucide icon alignment within date icons */
|
|
.tasknotes-plugin .task-inline-preview__date-icon svg {
|
|
vertical-align: baseline;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__date--clickable:hover .task-inline-preview__date-icon {
|
|
opacity: 1;
|
|
filter: brightness(1.3);
|
|
}
|
|
|
|
/* Recurring indicator styling */
|
|
.tasknotes-plugin .task-inline-preview__recurring-indicator {
|
|
opacity: 0.6;
|
|
cursor: var(--cursor);
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
padding: 1px 3px;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
vertical-align: baseline;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* Fix Lucide icon alignment within recurring indicator */
|
|
.tasknotes-plugin .task-inline-preview__recurring-indicator svg {
|
|
vertical-align: baseline;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__recurring-indicator {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__recurring-indicator:hover {
|
|
opacity: 1;
|
|
color: var(--interactive-accent);
|
|
transform: translateY(-1px);
|
|
filter: brightness(1.3);
|
|
}
|
|
|
|
/* Pencil icon styling */
|
|
.tasknotes-plugin .task-inline-preview__pencil {
|
|
opacity: 0;
|
|
cursor: var(--cursor);
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
padding: 1px 3px;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Fix Lucide icon alignment within pencil icon */
|
|
.tasknotes-plugin .task-inline-preview__pencil svg {
|
|
vertical-align: baseline;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__pencil {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__pencil:hover {
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
filter: brightness(1.3);
|
|
}
|
|
|
|
/* Hover state */
|
|
.tasknotes-plugin .task-inline-preview:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Completed task styling with maximum specificity */
|
|
.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed span.task-inline-preview__title,
|
|
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed .task-inline-preview__title,
|
|
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title {
|
|
text-decoration: line-through;
|
|
opacity: 0.7;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Completed task title hover effect */
|
|
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title:hover {
|
|
color: var(--interactive-accent);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed,
|
|
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed,
|
|
.tasknotes-plugin .task-inline-preview--completed {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* =================================================================
|
|
INSTANT CONVERT BUTTON STYLES
|
|
================================================================= */
|
|
|
|
/* Convert button for checkbox tasks - High specificity to override browser defaults */
|
|
.tasknotes-plugin button.instant-convert-button {
|
|
/* Layout */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* Sizing */
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: 8px;
|
|
padding: 0;
|
|
|
|
/* Visual styling */
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
border: none !important;
|
|
box-shadow: none;
|
|
border-radius: 3px;
|
|
|
|
/* Interactivity */
|
|
cursor: var(--cursor);
|
|
opacity: 0.6;
|
|
transition: all 0.15s ease;
|
|
|
|
/* Reset button styles */
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
text-decoration: none;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin button.instant-convert-button:hover {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
opacity: 1;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.tasknotes-plugin button.instant-convert-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.tasknotes-plugin button.instant-convert-button:focus {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* Icon inside the convert button */
|
|
.tasknotes-plugin .instant-convert-button__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .instant-convert-button__icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* =================================================================
|
|
ADDITIONAL INLINE TASK PREVIEW ELEMENTS
|
|
================================================================= */
|
|
|
|
/* Completed status styling - filled circle with checkmark */
|
|
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__status-dot {
|
|
background-color: var(--current-status-color, var(--tn-color-success));
|
|
border-color: var(--current-status-color, var(--tn-color-success));
|
|
color: var(--tn-text-on-accent);
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Task title */
|
|
.tasknotes-plugin .task-inline-preview__title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
margin: 0;
|
|
min-width: 0; /* Allow flex shrinking */
|
|
max-width: min(600px, 80vw); /* Responsive max-width for longer titles */
|
|
flex-shrink: 1; /* Allow shrinking if needed */
|
|
vertical-align: baseline;
|
|
cursor: var(--cursor);
|
|
transition: color 0.15s ease;
|
|
border-radius: 2px;
|
|
padding: 1px 2px;
|
|
margin: -1px -2px;
|
|
}
|
|
|
|
/* Task title hover effect */
|
|
.tasknotes-plugin .task-inline-preview__title:hover {
|
|
color: var(--interactive-accent);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Priority indicator */
|
|
.tasknotes-plugin .task-inline-preview__priority {
|
|
font-weight: bold;
|
|
font-size: 0.85em;
|
|
flex-shrink: 0;
|
|
margin-left: 3px;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
/* Priority border colors */
|
|
.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-high {
|
|
border-left-color: var(--color-red);
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-medium {
|
|
border-left-color: var(--color-orange);
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-low {
|
|
border-left-color: var(--color-blue);
|
|
}
|
|
|
|
/* Pencil menu icon */
|
|
.tasknotes-plugin .task-inline-preview__menu-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
flex-shrink: 0;
|
|
opacity: 0.4;
|
|
transition: opacity 0.15s ease;
|
|
cursor: var(--cursor);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 1px;
|
|
padding: 0;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__menu-icon:hover {
|
|
opacity: 1;
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__menu-icon {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* =================================================================
|
|
THEME-SPECIFIC ADJUSTMENTS
|
|
================================================================= */
|
|
|
|
/* Theme-specific adjustments */
|
|
.theme-dark .tasknotes-plugin .task-inline-preview {
|
|
background-color: var(--background-secondary);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.theme-light .tasknotes-plugin .task-inline-preview {
|
|
background-color: var(--background-secondary);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
/* =================================================================
|
|
ANIMATIONS
|
|
================================================================= */
|
|
|
|
/* Animation for appearance */
|
|
.tasknotes-plugin .task-inline-preview {
|
|
animation: tn-fadeInTaskPreview 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes tn-fadeInTaskPreview {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .task-inline-preview {
|
|
max-width: 200px;
|
|
padding: 2px 4px;
|
|
gap: 6px;
|
|
font-size: calc(var(--editor-font-size, 16px) * 0.9);
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__status-dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview__menu-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
READING MODE SPECIFIC STYLES
|
|
================================================================= */
|
|
|
|
/* Reading mode task preview adjustments */
|
|
.tasknotes-plugin .task-inline-preview--reading-mode {
|
|
/* Ensure proper display in reading mode context */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
/* Better visual integration with reading mode */
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background-color: var(--background-modifier-hover);
|
|
border: 1px solid var(--background-modifier-border);
|
|
|
|
/* Smooth transitions */
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview--reading-mode:hover {
|
|
background-color: var(--background-modifier-hover-active);
|
|
border-color: var(--interactive-accent);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Reading mode title styling */
|
|
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__title {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Reading mode date styling */
|
|
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date {
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Reading mode icon adjustments */
|
|
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date-icon {
|
|
width: 11px;
|
|
height: 11px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__pencil {
|
|
width: 11px;
|
|
height: 11px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview--reading-mode:hover .task-inline-preview__pencil {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* =================================================================
|
|
TASK INLINE PREVIEW DRAG AND DROP STATES
|
|
================================================================= */
|
|
|
|
/* Dragging state for task inline preview widgets */
|
|
.tasknotes-plugin .task-inline-preview--dragging {
|
|
opacity: 0.6;
|
|
transform: scale(0.95);
|
|
cursor: grabbing;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Drag cursor for draggable task inline preview widgets */
|
|
.tasknotes-plugin .task-inline-preview[draggable="true"] {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tasknotes-plugin .task-inline-preview[draggable="true"]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
|
|
/* ===== NOTE-CARD-BEM.CSS ===== */
|
|
/* =================================================================
|
|
NOTECARD COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
|
|
================================================================= */
|
|
|
|
/* All NoteCard styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
.tasknotes-plugin .note-card {
|
|
/* Layout & Structure */
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
position: relative;
|
|
|
|
/* Spacing & Sizing - Todoist compact style */
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
margin-bottom: 1px;
|
|
|
|
/* Visual Styling - Todoist minimal style */
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
border-left: 3px solid transparent; /* Transparent by default */
|
|
|
|
/* Interactions & Accessibility - Simplified */
|
|
cursor: var(--cursor);
|
|
transition: background-color var(--tn-transition-fast);
|
|
outline: none;
|
|
role: listitem;
|
|
tabindex: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:focus {
|
|
background-color: var(--tn-interactive-hover);
|
|
outline: 1px solid var(--tn-border-color);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Daily note specific styling */
|
|
.tasknotes-plugin .note-card--daily {
|
|
border-left: 3px solid var(--tn-interactive-accent); /* Purple left border for daily notes only */
|
|
}
|
|
|
|
/* Ensure all note card titles match task card titles exactly */
|
|
.tasknotes-plugin .note-card__title,
|
|
.tasknotes-plugin .tn-card__title,
|
|
.tasknotes-plugin .note-card--daily .note-card__title,
|
|
.tasknotes-plugin .note-card--daily-note .note-card__title {
|
|
font-size: var(--tn-font-size-lg) !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
/* Remove border radius for cleaner list appearance */
|
|
.tasknotes-plugin .note-card:first-child,
|
|
.tasknotes-plugin .note-card:last-child,
|
|
.tasknotes-plugin .note-card:first-child:last-child {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
NOTECARD ELEMENTS (BEM __element)
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .note-card__main-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
color: var(--tn-text-muted);
|
|
align-self: center;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__title {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
transition: color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__divider {
|
|
height: 1px;
|
|
background: var(--tn-border-color);
|
|
margin: var(--tn-spacing-xs) 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__tags {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-xs);
|
|
background: var(--tn-bg-secondary);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
border: 1px solid var(--tn-border-color);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__tag:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__tags-text {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__metadata {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-faint);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__preview {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
line-height: 1.3;
|
|
margin-top: var(--tn-spacing-xs);
|
|
max-height: 2.6em; /* Approximately 2 lines */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__badge {
|
|
position: absolute;
|
|
top: var(--tn-spacing-md);
|
|
right: var(--tn-spacing-md);
|
|
padding: 2px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-xs);
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
transition: opacity var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:hover .note-card__badge {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* =================================================================
|
|
NOTECARD MODIFIERS (BEM --modifier)
|
|
================================================================= */
|
|
|
|
/* Compact Layout */
|
|
.tasknotes-plugin .note-card--compact {
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--compact .note-card__content {
|
|
gap: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--compact .note-card__title {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--compact .note-card__preview {
|
|
display: none; /* Hide preview in compact mode */
|
|
}
|
|
|
|
/* Daily Note Variant */
|
|
.tasknotes-plugin .note-card--daily-note {
|
|
border-left-color: var(--tn-color-daily-note);
|
|
background: transparent; /* Keep consistent with other note cards */
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--daily-note .note-card__badge {
|
|
background: var(--tn-color-daily-note);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
/* Shadow Variants - Disabled for consistency with task cards */
|
|
.tasknotes-plugin .note-card--shadow-light:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--shadow-medium:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card--shadow-strong:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Update Animation */
|
|
.tasknotes-plugin .note-card--updated {
|
|
animation: note-card-update 1.2s ease-out;
|
|
}
|
|
|
|
@keyframes note-card-update {
|
|
0% {
|
|
box-shadow: 0 0 0 0 color-mix(in srgb, var(--tn-color-info) 40%, transparent);
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tn-color-info) 30%, transparent);
|
|
border-left-color: var(--tn-color-info);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 color-mix(in srgb, var(--tn-color-info) 0%, transparent);
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
SHARED BASE CARD STYLES
|
|
================================================================= */
|
|
|
|
/* Base card component that can be shared between TaskCard and NoteCard */
|
|
.tasknotes-plugin .tn-card {
|
|
/* Common card styling */
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
position: relative;
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
margin-bottom: 0;
|
|
background-color: var(--tn-bg-primary);
|
|
border: none;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
border-radius: 0;
|
|
cursor: var(--cursor);
|
|
transition: background-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-card:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-card__content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-card__title {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
transition: color var(--tn-transition-fast);
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
/* Touch-specific adjustments */
|
|
@media (pointer: coarse) {
|
|
.tasknotes-plugin .note-card {
|
|
padding: var(--tn-spacing-lg) var(--tn-spacing-xl);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.tasknotes-plugin .note-card__badge {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== FILTER-BAR-BEM.CSS ===== */
|
|
/* =================================================================
|
|
ADVANCED FILTER BAR COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
|
|
================================================================= */
|
|
|
|
/* All FilterBar styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
/* Main Container */
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
/* Top Controls (Filter Icon + Search + Templates Button) */
|
|
.tasknotes-plugin .filter-bar__top-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: relative; /* Set as positioning context for the dropdown */
|
|
z-index: 10; /* Ensure this container is on top of the filter box below */
|
|
isolation: isolate; /* Create a new stacking context */
|
|
container-type: inline-size; /* Enable container queries */
|
|
}
|
|
|
|
|
|
/* Filter toggle base (positioning for badge) */
|
|
.tasknotes-plugin .filter-bar__filter-toggle {
|
|
position: relative; /* context for badge */
|
|
}
|
|
|
|
/* Active filter badge dot */
|
|
.tasknotes-plugin .filter-bar__filter-toggle.has-active-filters::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #a78bfa; /* subtle purple */
|
|
}
|
|
|
|
/* Icon + Text Button Styling */
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 6px !important;
|
|
min-height: var(--input-height);
|
|
border-radius: var(--radius-s);
|
|
width: auto !important; /* Override any fixed width */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
white-space: nowrap;
|
|
font-size: var(--font-ui-small);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Override button-specific hover states for consistent text+icon button behavior */
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon:hover {
|
|
background: var(--interactive-hover) !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Clear all button in Filter section header */
|
|
.tasknotes-plugin .filter-bar__clear-filters {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
margin-left: var(--tn-spacing-sm);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--color-grey-tint);
|
|
background-color: var(--color-grey-base);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
.tasknotes-plugin .filter-bar__clear-filters:hover {
|
|
background-color: var(--interactive-hover);
|
|
}
|
|
.tasknotes-plugin .filter-bar__clear-filters svg {
|
|
width: 16px; height: 16px;
|
|
}
|
|
|
|
/* Clear all filters button in Filter section header - matches Save button style exactly */
|
|
.tasknotes-plugin .filter-bar__clear-all-button {
|
|
/* Ensure identical sizing and alignment with Save button */
|
|
width: var(--input-height);
|
|
height: var(--input-height);
|
|
min-width: var(--input-height);
|
|
min-height: var(--input-height);
|
|
padding: 0;
|
|
margin-right: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Ensure the icon is properly centered */
|
|
.tasknotes-plugin .filter-bar__clear-all-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Close modal button - matches other buttons exactly but with transparent background */
|
|
.tasknotes-plugin .filter-bar__close-modal-button {
|
|
/* Identical sizing to Clear and Save buttons */
|
|
width: var(--input-height);
|
|
height: var(--input-height);
|
|
min-width: var(--input-height);
|
|
min-height: var(--input-height);
|
|
padding: 0;
|
|
margin-left: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: top;
|
|
/* Transparent background */
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Ensure the close icon is properly centered */
|
|
.tasknotes-plugin .filter-bar__close-modal-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Natural Language Date Input Enhancement */
|
|
.tasknotes-plugin .filter-date-input-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input {
|
|
flex: 1;
|
|
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
/* Date input validation states - subtle styling */
|
|
.tasknotes-plugin .filter-date-text-input.is-valid {
|
|
border-left: 2px solid var(--color-green);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 1px rgba(var(--color-green-rgb), 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input.is-invalid {
|
|
border-left: 2px solid var(--color-red);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 1px rgba(var(--color-red-rgb), 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input.is-empty {
|
|
border-left: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-help-button {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--text-muted);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
cursor: var(--cursor);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-help-button:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
border-color: var(--text-normal);
|
|
}
|
|
|
|
.filter-date-help-tooltip {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--tn-spacing-sm);
|
|
box-shadow: var(--shadow-s);
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.filter-date-help-tooltip h4 {
|
|
margin: 0 0 var(--tn-spacing-xs) 0;
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.filter-date-help-tooltip ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px;
|
|
}
|
|
|
|
.filter-date-help-tooltip li {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-hover);
|
|
border-radius: var(--radius-s);
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle {
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
transition: all 0.2s ease;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle:hover {
|
|
background: var(--interactive-hover) !important;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle--active {
|
|
background: var(--interactive-accent-tint);
|
|
color: var(--color-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
height: var(--tn-button-height-md); /* Consistent height */
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button:hover {
|
|
background: var(--interactive-hover) !important;
|
|
color: var(--text-normal);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button--active {
|
|
background: var(--interactive-accent-tint);
|
|
color: var(--color-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button--saved-view-active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: 0 0 0 1px var(--color-accent);
|
|
}
|
|
|
|
/* Search Input */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex: 1;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
transition: all 0.2s ease;
|
|
height: var(--tn-button-height-md); /* Consistent height */
|
|
min-width: 0 !important; /* Override any default min-width */
|
|
width: auto; /* Allow natural width */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__search-input:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__search-input::placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Main Filter Box (collapsible popup) */
|
|
.tasknotes-plugin .filter-bar__main-box {
|
|
position: absolute;
|
|
top: calc(100% + 4px); /* Position below the top controls with a small gap */
|
|
left: auto; /* Let it position dynamically */
|
|
right: auto; /* Let it position dynamically */
|
|
width: 500px; /* Default preferred width */
|
|
max-width: 600px; /* Maximum preferred width */
|
|
min-width: 400px; /* Minimum usable width */
|
|
z-index: 1000; /* High z-index */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__main-box--collapsed {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.98);
|
|
pointer-events: none; /* Prevent interaction when hidden */
|
|
}
|
|
|
|
/* =================================================================
|
|
VIEW SELECTOR SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0; /* Default align to right of the container */
|
|
left: auto;
|
|
min-width: 240px;
|
|
max-width: 320px;
|
|
z-index: 1000; /* Ensure it's on top */
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
|
|
margin-top: 4px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Left-aligned variant for Views-left configuration */
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown.filter-bar__view-selector-dropdown--left {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown--hidden {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.95);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section:not(:last-child) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section-header {
|
|
font-weight: 600; /* Slightly stronger for better hierarchy */
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
text-transform: none; /* Normal case */
|
|
letter-spacing: 0; /* Natural spacing */
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
margin: 2px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container:hover {
|
|
background: var(--background-modifier-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Drag and drop styles */
|
|
.tasknotes-plugin .filter-bar__view-drag-handle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: var(--tn-spacing-xs);
|
|
color: var(--text-faint);
|
|
cursor: grab;
|
|
font-size: 14px;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
border-radius: var(--radius-s);
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 2px;
|
|
background: currentColor;
|
|
border-radius: 1px;
|
|
box-shadow:
|
|
0 -4px 0 currentColor,
|
|
0 4px 0 currentColor;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container:hover .filter-bar__view-drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle:active {
|
|
cursor: grabbing;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--dragging {
|
|
opacity: 0.8;
|
|
transform: scale(1.02);
|
|
background: var(--background-modifier-hover);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: var(--radius-s);
|
|
z-index: 1000;
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--placeholder {
|
|
opacity: 0.5;
|
|
background: var(--interactive-accent-tint);
|
|
border: 2px dashed var(--color-accent);
|
|
border-radius: var(--radius-s);
|
|
pointer-events: none;
|
|
min-height: 30px;
|
|
transition: all 0.2s ease;
|
|
animation: placeholderPulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes placeholderPulse {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item {
|
|
flex: 1;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: none;
|
|
border: none !important;
|
|
box-shadow: none;
|
|
outline: none;
|
|
color: var(--text-normal);
|
|
text-align: left;
|
|
justify-content: flex-start;
|
|
cursor: var(--cursor);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item--active {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--active {
|
|
background: var(--interactive-accent);
|
|
border-radius: var(--radius-s);
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--active:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-delete {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-delete:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-action {
|
|
display: block;
|
|
width: 100%;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-accent);
|
|
text-align: left;
|
|
cursor: var(--cursor);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-action:hover {
|
|
background: var(--interactive-accent-tint);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-empty-message {
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
text-align: center;
|
|
background: var(--background-modifier-hover);
|
|
margin: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* =================================================================
|
|
COLLAPSIBLE FILTER SECTIONS
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__section {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
cursor: var(--cursor);
|
|
padding: var(--tn-spacing-sm) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main:hover {
|
|
background: var(--interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main::before {
|
|
content: "▼";
|
|
margin-right: var(--tn-spacing-xs);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header--collapsed .filter-bar__section-header-main::before {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__save-button {
|
|
/* Remove individual styles - use tn-btn tn-btn--icon tn-btn--ghost classes */
|
|
padding: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__save-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Expand/Collapse all group buttons - Add pointer cursor but keep good hover */
|
|
.tasknotes-plugin .filter-bar__expand-groups,
|
|
.tasknotes-plugin .filter-bar__collapse-groups {
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: pointer !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
transition: all 0.2s ease;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__expand-groups:hover,
|
|
.tasknotes-plugin .filter-bar__collapse-groups:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__expand-groups svg,
|
|
.tasknotes-plugin .filter-bar__collapse-groups svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-title {
|
|
font-weight: 500; /* Slightly lighter */
|
|
font-size: var(--font-ui-small); /* Consistent size */
|
|
color: var(--text-muted); /* Muted for subtlety */
|
|
text-transform: none; /* Normal case */
|
|
letter-spacing: 0; /* Natural spacing */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__active-view-name {
|
|
font-weight: 400;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-accent);
|
|
margin-left: var(--tn-spacing-xs);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-content {
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
opacity: 1;
|
|
max-height: 1000px; /* Large enough for content */
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-content--collapsed {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
FILTER BUILDER SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__filter-builder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Filter Groups and Conditions */
|
|
.tasknotes-plugin .filter-bar__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border); /* Subtle border for grouping */
|
|
border-radius: var(--radius-m);
|
|
position: relative;
|
|
}
|
|
|
|
/* Remove styling for the top-level group to blend with its container */
|
|
.tasknotes-plugin .filter-bar__filter-builder > .filter-bar__group {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group .filter-bar__group {
|
|
background: var(--background-secondary-alt);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction .dropdown {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
height: 28px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction .dropdown:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction-text {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__children {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition .dropdown,
|
|
.tasknotes-plugin .filter-bar__condition .text-input {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs);
|
|
height: 28px;
|
|
max-width: 200px;
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition .dropdown:hover,
|
|
.tasknotes-plugin .filter-bar__condition .text-input:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs) 0; /* Let parent padding handle horizontal space */
|
|
background: transparent; /* No background */
|
|
border: 1px; /* No border */
|
|
border-radius: 0;
|
|
flex-wrap: wrap;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition-prefix {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
text-align: right;
|
|
min-width: 50px; /* More flexible width */
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-input {
|
|
border: none; /* No borders on inputs */
|
|
background: transparent; /* Transparent background */
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
width: auto;
|
|
height: 28px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:hover,
|
|
.tasknotes-plugin .filter-bar__operator-select:hover,
|
|
.tasknotes-plugin .filter-bar__value-input:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:focus,
|
|
.tasknotes-plugin .filter-bar__operator-select:focus,
|
|
.tasknotes-plugin .filter-bar__value-input:focus {
|
|
background-color: var(--background-modifier-hover);
|
|
outline: none;
|
|
}
|
|
|
|
/* A more specific rule to override default component styles within the value container */
|
|
.tasknotes-plugin .filter-bar__value-container .text-input,
|
|
.tasknotes-plugin .filter-bar__value-container .dropdown .select-input {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
height: 26px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container .text-input:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0; /* No gap for combined look */
|
|
flex: 1;
|
|
width: 100%;
|
|
border-radius: var(--radius-s);
|
|
padding: 0 var(--tn-spacing-xs);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-input {
|
|
border: none;
|
|
background: transparent;
|
|
padding: var(--tn-spacing-xs);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
width: 100%;
|
|
height: 28px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-input:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group-actions {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button {
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* =================================================================
|
|
DISPLAY & ORGANIZATION SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__display-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tn-spacing-md);
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container,
|
|
.tasknotes-plugin .filter-bar__group-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container .dropdown,
|
|
.tasknotes-plugin .filter-bar__group-container .dropdown {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
height: 28px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
min-width: 120px;
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container .dropdown:hover,
|
|
.tasknotes-plugin .filter-bar__group-container .dropdown:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-direction {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs);
|
|
height: 28px;
|
|
width: 30px;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-accent);
|
|
cursor: var(--cursor);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-direction:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-accent-hover);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* =================================================================
|
|
VIEW OPTIONS SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__view-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
cursor: var(--cursor);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-checkbox {
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-text {
|
|
user-select: none;
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
/* Hide button text on narrow panes (container width-based responsiveness) */
|
|
@container (max-width: 500px) {
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
display: none !important;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
padding: 2px 4px !important;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide Views button text and show only chevron icon */
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: 2px 4px !important;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
width: var(--input-height);
|
|
font-size: 0 !important; /* Hide text */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Adjust search input to take more space when buttons are icon-only */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex-grow: 2;
|
|
min-width: 0 !important; /* Force override any inherited min-width */
|
|
flex-basis: 0; /* Start from zero width and grow */
|
|
}
|
|
}
|
|
|
|
/* Fallback for browsers without container query support */
|
|
@media (max-width: 700px) {
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
display: none !important;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
padding: 2px 4px !important;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide Views button text and show only chevron icon */
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: 2px 4px !important;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
width: var(--input-height);
|
|
font-size: 0 !important; /* Hide text */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Adjust search input to take more space when buttons are icon-only */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex-grow: 2;
|
|
min-width: 0 !important; /* Force override any inherited min-width */
|
|
flex-basis: 0; /* Start from zero width and grow */
|
|
}
|
|
}
|
|
|
|
/* Mobile styles */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
padding: var(--tn-spacing-sm);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__display-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container,
|
|
.tasknotes-plugin .filter-bar__group-container {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__children {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* Tablet styles */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container {
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
ACCESSIBILITY & FOCUS STATES
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:focus,
|
|
.tasknotes-plugin .filter-bar__operator-select:focus,
|
|
.tasknotes-plugin .filter-bar__conjunction-select:focus,
|
|
.tasknotes-plugin .filter-bar__sort-select:focus,
|
|
.tasknotes-plugin .filter-bar__group-select:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button:focus,
|
|
.tasknotes-plugin .filter-bar__action-button:focus,
|
|
.tasknotes-plugin .filter-bar__view-options-button:focus,
|
|
.tasknotes-plugin .filter-bar__section-header:focus,
|
|
.tasknotes-plugin .filter-bar__view-selector-button:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
}
|
|
|
|
/* =================================================================
|
|
ERROR STATE STYLING
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar-error {
|
|
padding: var(--size-4-2);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
font-size: var(--font-ui-smaller);
|
|
border-radius: var(--radius-s);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* =================================================================
|
|
DARK MODE COMPATIBILITY
|
|
================================================================= */
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__main-box {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__group {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__condition {
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar-error {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* =================================================================
|
|
HIGH CONTRAST MODE
|
|
================================================================= */
|
|
|
|
@media (prefers-contrast: high) {
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition,
|
|
.tasknotes-plugin .filter-bar__group {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select,
|
|
.tasknotes-plugin .filter-bar__operator-select,
|
|
.tasknotes-plugin .filter-bar__value-input {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
BUTTON ICONS VIA CSS PSEUDO-ELEMENTS
|
|
================================================================= */
|
|
|
|
/* Add filter button - plus sign */
|
|
.tasknotes-plugin .filter-bar__add-filter::before {
|
|
content: "+ ";
|
|
margin-right: 4px;
|
|
font-weight: bold;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Add filter group button - plus sign in circle */
|
|
.tasknotes-plugin .filter-bar__add-group::before {
|
|
content: "⊕ ";
|
|
margin-right: 4px;
|
|
font-weight: bold;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
|
|
|
|
/* ===== FILTER-HEADING.CSS ===== */
|
|
/* =================================================================
|
|
FILTER HEADING COMPONENT
|
|
================================================================= */
|
|
|
|
/* All FilterHeading styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
/* Main Container */
|
|
.tasknotes-plugin .filter-heading {
|
|
margin-top: var(--tn-spacing-lg);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
/* Content wrapper with heading and count */
|
|
.tasknotes-plugin .filter-heading__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Heading title */
|
|
.tasknotes-plugin .filter-heading__title {
|
|
margin: 0;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Count display */
|
|
.tasknotes-plugin .filter-heading__count {
|
|
font-weight: 600;
|
|
font-size: var(--font-ui-small);
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Divider line */
|
|
.tasknotes-plugin .filter-heading__divider {
|
|
height: 1px;
|
|
background-color: var(--background-modifier-border);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
|
|
/* ===== SEARCH-BOX.CSS ===== */
|
|
/* Search Box Component - BEM Structure */
|
|
|
|
.tn-search-container {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.tn-search-box {
|
|
padding: 0;
|
|
padding-top: var(--size-4-3, 12px);
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.tn-search-box__input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2, 8px);
|
|
padding-left: var(--size-4-3, 12px);
|
|
border: none;
|
|
}
|
|
|
|
.tn-search-box__icon {
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tn-search-box__icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tn-search-box__input {
|
|
flex: 1;
|
|
padding: var(--size-4-2, 8px) var(--size-4-3, 12px);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m, 8px);
|
|
background: var(--input-background, var(--background-primary));
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small, 13px);
|
|
outline: none;
|
|
min-width: 0;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.tn-search-box__input::placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tn-search-box__clear {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-s, 4px);
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.tn-search-box__clear.is-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.tn-search-box__clear:hover {
|
|
color: var(--text-normal);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tn-search-box__clear:active {
|
|
background-color: var(--background-modifier-active-hover);
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
.tn-search-box__clear:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* No results state */
|
|
.tn-search-no-results {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--size-4-8, 32px) var(--size-4-4, 16px);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tn-search-no-results__text {
|
|
font-size: var(--font-ui-medium, 14px);
|
|
color: var(--text-normal);
|
|
margin-bottom: var(--size-4-2, 8px);
|
|
}
|
|
|
|
.tn-search-no-results__hint {
|
|
font-size: var(--font-ui-small, 13px);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
|
|
|
|
/* ===== MODAL-BEM.CSS ===== */
|
|
/* =====================================================================
|
|
MODAL COMPONENTS - BEM with TaskNotes Plugin Scoping
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
NATURAL LANGUAGE INPUT - MINIMALIST STYLES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .nl-input-container {
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--tn-font-size-lg);
|
|
line-height: 1.5;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-button-container {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-quick-create-button {
|
|
padding: 6px 16px;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 500;
|
|
border-radius: var(--radius-s);
|
|
border: none;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-quick-create-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-parse-button {
|
|
padding: 6px 14px;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: 500;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--tn-text-muted);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-parse-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--tn-text-normal);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-show-detail-button {
|
|
padding: 6px 8px;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 600;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
color: var(--tn-text-muted);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-show-detail-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--tn-text-normal);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-container {
|
|
margin-top: var(--size-4-1);
|
|
padding: var(--size-4-1);
|
|
background: var(--background-primary-alt);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 6px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-text-content {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* =====================================================================
|
|
BASE MODAL CONTAINER STYLES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal,
|
|
.tasknotes-plugin .scheduled-date-modal,
|
|
.tasknotes-plugin .task-selector-modal {
|
|
padding: var(--tn-spacing-xl);
|
|
max-width: 580px;
|
|
width: 100%;
|
|
background: var(--tn-bg-primary);
|
|
border-radius: var(--tn-radius-md);
|
|
box-shadow: var(--tn-shadow-strong);
|
|
}
|
|
|
|
/* =====================================================================
|
|
MODAL HEADERS AND HEADINGS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal .setting-item-heading,
|
|
.tasknotes-plugin .scheduled-date-modal .setting-item-heading {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
line-height: 1.3;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* =====================================================================
|
|
SHARED FORM COMPONENTS (BEM)
|
|
===================================================================== */
|
|
|
|
/* Form Group Container */
|
|
.tasknotes-plugin .modal-form__group {
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
/* Form Labels */
|
|
.tasknotes-plugin .modal-form__label {
|
|
display: block;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Help Text */
|
|
.tasknotes-plugin .modal-form__help-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
margin-top: var(--tn-spacing-sm);
|
|
line-height: 1.4;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Input Container */
|
|
.tasknotes-plugin .modal-form__input-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* Base Input Styles */
|
|
.tasknotes-plugin .modal-form__input,
|
|
.tasknotes-plugin .modal-form__select {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-normal);
|
|
line-height: 1.4;
|
|
transition: border-color var(--tn-transition-fast);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
|
|
/* Make select elements taller to prevent dropdown option clipping */
|
|
.tasknotes-plugin .modal-form__select {
|
|
padding: var(--tn-spacing-lg) var(--tn-spacing-lg);
|
|
min-height: 44px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input:hover,
|
|
.tasknotes-plugin .modal-form__select:hover {
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input:focus,
|
|
.tasknotes-plugin .modal-form__select:focus {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Input Modifiers */
|
|
.tasknotes-plugin .modal-form__input--textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--title {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--number {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =====================================================================
|
|
CHARACTER COUNTER COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__char-counter {
|
|
position: absolute;
|
|
top: calc(-1 * var(--tn-spacing-lg));
|
|
right: 0;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-normal);
|
|
line-height: 1.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__char-counter--warning {
|
|
color: var(--tn-color-error);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
AUTOCOMPLETE COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__autocomplete {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestions {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
box-shadow: var(--tn-shadow-strong);
|
|
z-index: var(--tn-z-dropdown);
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
padding: var(--tn-spacing-sm) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestion {
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
|
|
cursor: var(--cursor);
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
line-height: 1.5;
|
|
transition: background-color var(--tn-transition-fast);
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestion:hover,
|
|
.tasknotes-plugin .modal-form__suggestion--selected {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DATE/TIME INPUT COMPONENTS
|
|
===================================================================== */
|
|
|
|
/* DateTime Container */
|
|
.tasknotes-plugin .modal-form__datetime-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* User-field date input: full width textbox; icon overlayed on the left */
|
|
.tasknotes-plugin .tn-date-control {
|
|
position: relative;
|
|
padding-left: 35px; /* reserve space for the icon to the left of the textbox */
|
|
}
|
|
.tasknotes-plugin .tn-date-control input[type="text"] {
|
|
padding-left: 0; /* the padding-left is applied on the container */
|
|
}
|
|
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: var(--tn-text-muted);
|
|
z-index: 1;
|
|
}
|
|
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
/* Date and Time Input Modifiers */
|
|
.tasknotes-plugin .modal-form__input--date {
|
|
flex: 1;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--time {
|
|
width: 120px;
|
|
font-family: var(--tn-font-mono);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =====================================================================
|
|
TIME ESTIMATE COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__time-estimate {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__time-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =====================================================================
|
|
RECURRENCE COMPONENTS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__recurrence {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__recurrence-options {
|
|
margin-top: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__recurrence-label {
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Interval Input Components */
|
|
.tasknotes-plugin .modal-form__interval-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
margin: var(--tn-spacing-md) 0;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__interval-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--interval {
|
|
width: 80px !important;
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__interval-unit {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* RRule Options Container */
|
|
.tasknotes-plugin .modal-form__rrule-options {
|
|
margin: var(--tn-spacing-md) 0;
|
|
}
|
|
|
|
/* RRule Labels */
|
|
.tasknotes-plugin .modal-form__rrule-label {
|
|
display: block;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Monthly and Yearly Options */
|
|
.tasknotes-plugin .modal-form__monthly-mode,
|
|
.tasknotes-plugin .modal-form__yearly-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__radio-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__radio-option input[type="radio"] {
|
|
width: auto;
|
|
height: auto;
|
|
flex: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__select--position,
|
|
.tasknotes-plugin .modal-form__select--weekday,
|
|
.tasknotes-plugin .modal-form__select--month {
|
|
width: auto;
|
|
min-width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--day {
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__yearly-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DETAILED FORM CONTAINER (TaskCreationModal specific)
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .detailed-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-lg);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .detailed-form-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* End Condition Options */
|
|
.tasknotes-plugin .modal-form__end-condition {
|
|
margin: var(--tn-spacing-md) 0;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__end-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--count {
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__count-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* RRule Summary */
|
|
.tasknotes-plugin .modal-form__rrule-summary {
|
|
margin-top: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__rrule-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Days of Week Grid */
|
|
.tasknotes-plugin .modal-form__days-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--tn-bg-primary);
|
|
border-radius: var(--tn-radius-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-checkbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-input {
|
|
margin: 0;
|
|
cursor: var(--cursor);
|
|
width: auto;
|
|
height: auto;
|
|
flex: none;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
cursor: var(--cursor);
|
|
user-select: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* =====================================================================
|
|
BUTTON COMPONENTS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__buttons {
|
|
display: flex;
|
|
gap: var(--tn-spacing-lg);
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-top: var(--tn-spacing-xxl);
|
|
padding-top: var(--tn-spacing-lg);
|
|
border-top: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Buttons use shared tn-btn system; no modal-specific overrides here */
|
|
|
|
/* Tertiary Button (Open note, etc.) */
|
|
.tasknotes-plugin .modal-form__button--tertiary {
|
|
background: transparent;
|
|
color: var(--tn-interactive-accent);
|
|
border: none;
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--tertiary:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-interactive-accent-hover);
|
|
}
|
|
|
|
/* Quick Date Buttons */
|
|
.tasknotes-plugin .modal-form__quick-actions {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
color: var(--tn-text-normal);
|
|
border: 1px solid var(--tn-border-color);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date--clear {
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date--clear:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
|
|
|
|
/* =====================================================================
|
|
QUICK DATE MODALS SPECIFIC
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal__task-title,
|
|
.tasknotes-plugin .scheduled-date-modal__task-title {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
TASK SELECTOR MODAL SPECIFIC
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .task-selector-modal__suggestion {
|
|
padding: var(--tn-spacing-md);
|
|
border-radius: var(--tn-radius-sm);
|
|
border-left: 3px solid transparent;
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__suggestion:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__title {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--completed {
|
|
text-decoration: line-through;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--high-priority {
|
|
color: var(--tn-color-error);
|
|
border-left-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--low-priority {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-secondary);
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date--overdue {
|
|
background: rgba(var(--tn-color-error), 0.1);
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date--today {
|
|
background: rgba(var(--tn-color-warning), 0.1);
|
|
color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__contexts {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__context-tag {
|
|
padding: 1px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-secondary);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__status {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: capitalize;
|
|
background: var(--tn-bg-secondary);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ERROR STATES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__error {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
margin: var(--tn-spacing-md) 0;
|
|
background: rgba(var(--tn-color-error), 0.1);
|
|
border: 1px solid var(--tn-color-error);
|
|
border-radius: var(--tn-radius-sm);
|
|
color: var(--tn-color-error);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
RESPONSIVE DESIGN
|
|
===================================================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .due-date-modal,
|
|
.tasknotes-plugin .scheduled-date-modal {
|
|
padding: var(--tn-spacing-lg);
|
|
max-width: 92vw;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__buttons {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__days-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__quick-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date {
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
ACCESSIBILITY ENHANCEMENTS
|
|
===================================================================== */
|
|
|
|
/* Focus styles are defined above - removed duplicate conflicting rules */
|
|
|
|
/* Screen reader only text */
|
|
.tasknotes-plugin .modal-form__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;
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS NOTE CREATION MODAL
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-note-creation-modal {
|
|
width: 600px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-preview {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-preview h3 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details > div {
|
|
margin-bottom: var(--size-4-1);
|
|
font-size: var(--tn-font-size-md);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Align all modal setting controls to the right edge of the column */
|
|
.tasknotes-plugin .modal .setting-item .setting-item-control {
|
|
flex: none;
|
|
text-align: end;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .content-type-selector .setting-item-control {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button {
|
|
padding: var(--size-4-1) var(--size-4-3);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--tn-text-normal);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button.mod-cta {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .content-preview {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin: var(--size-4-3) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .content-preview h4 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .preview-details > div {
|
|
margin-bottom: var(--size-4-1);
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variables {
|
|
margin-top: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variables h5 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.tasknotes-plugin .variables-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variable {
|
|
background: var(--background-modifier-border);
|
|
color: var(--tn-text-muted);
|
|
padding: 2px var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-4-4);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS EVENT INFO MODAL
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-event-info-modal {
|
|
width: 700px;
|
|
max-width: 95vw;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal .modal-content {
|
|
padding: var(--size-4-4);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal .modal-header h2 {
|
|
margin: 0 0 var(--size-4-4) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section,
|
|
.tasknotes-plugin .related-notes-section,
|
|
.tasknotes-plugin .action-buttons-section {
|
|
margin-bottom: var(--size-4-4);
|
|
padding-bottom: var(--size-4-3);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section:last-of-type,
|
|
.tasknotes-plugin .related-notes-section:last-of-type,
|
|
.tasknotes-plugin .action-buttons-section:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section h3,
|
|
.tasknotes-plugin .related-notes-section h3,
|
|
.tasknotes-plugin .action-buttons-section h3 {
|
|
margin: 0 0 var(--size-4-3) 0;
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--size-4-2);
|
|
font-size: var(--tn-font-size-md);
|
|
margin-bottom: var(--size-4-2);
|
|
line-height: 1.4;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row strong {
|
|
min-width: 120px;
|
|
flex-shrink: 0;
|
|
color: var(--tn-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row span {
|
|
flex: 1;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row.description-row {
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .description-content {
|
|
background: var(--background-secondary);
|
|
padding: var(--size-4-2);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
font-style: italic;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .external-link {
|
|
color: var(--interactive-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tasknotes-plugin .external-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .empty-state {
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
padding: var(--size-4-4);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .related-notes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .related-note-item {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .related-note-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .note-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .note-icon {
|
|
font-size: var(--tn-font-size-lg);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tasknotes-plugin .note-header .internal-link {
|
|
color: var(--tn-text-normal);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .note-header .internal-link:hover {
|
|
color: var(--interactive-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .note-metadata {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .note-status,
|
|
.tasknotes-plugin .note-priority {
|
|
background: var(--background-modifier-border);
|
|
padding: 2px var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .close-button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: var(--size-4-4);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS NOTE LINK MODAL (Fuzzy Selector)
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-note-link-suggestion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
padding: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .note-link-name {
|
|
font-weight: 500;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .note-link-path {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
|
|
/* ===== TASK-MODAL.CSS ===== */
|
|
/* =====================================================================
|
|
TASK MODAL - Google Keep/Todoist Inspired
|
|
===================================================================== */
|
|
|
|
/* Fix suggestion text truncation */
|
|
.suggestion-item .nlp-suggest-text {
|
|
white-space: nowrap;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
max-width: none;
|
|
width: auto;
|
|
}
|
|
|
|
/* =====================================================================
|
|
EMBEDDABLE MARKDOWN EDITOR
|
|
===================================================================== */
|
|
|
|
.details-markdown-editor {
|
|
margin-bottom: var(--size-4-3);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
overflow: hidden;
|
|
min-height: 200px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.details-markdown-editor .task-details-editor {
|
|
min-height: 200px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Make the editor container scrollable */
|
|
.details-markdown-editor .cm-editor {
|
|
height: 100%;
|
|
min-height: 200px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.details-markdown-editor .cm-scroller {
|
|
overflow: auto;
|
|
max-height: 400px;
|
|
padding-top: var(--size-4-2);
|
|
padding-bottom: var(--size-4-2);
|
|
}
|
|
|
|
/* Style the editor content */
|
|
.details-markdown-editor .cm-content {
|
|
padding-left: var(--size-4-2) !important;
|
|
padding-right: var(--size-4-2) !important;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
font-family: var(--font-text);
|
|
font-size: var(--font-ui-medium);
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
/* Ensure the editor line doesn't add extra padding */
|
|
/* .details-markdown-editor .cm-line { */
|
|
/* padding-left: 0 !important; */
|
|
/* padding-right: 0 !important; */
|
|
/* } */
|
|
|
|
/* Placeholder styling */
|
|
.details-markdown-editor .cm-placeholder {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =====================================================================
|
|
NLP MARKDOWN EDITOR
|
|
===================================================================== */
|
|
|
|
.nl-markdown-editor {
|
|
margin-bottom: var(--size-4-2);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
overflow: visible;
|
|
min-height: 80px;
|
|
max-height: 200px;
|
|
background: transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nl-markdown-editor .nlp-editor {
|
|
min-height: 80px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.nl-markdown-editor .cm-editor {
|
|
height: 100%;
|
|
min-height: 80px;
|
|
max-height: 200px;
|
|
background: transparent;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Focus state for NLP editor - match old nl-input styling */
|
|
.nl-markdown-editor:focus-within {
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.nl-markdown-editor:focus-within .cm-editor {
|
|
background: transparent;
|
|
}
|
|
|
|
.nl-markdown-editor .cm-scroller {
|
|
overflow: auto;
|
|
max-height: 200px;
|
|
padding-top: var(--size-4-3);
|
|
padding-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.nl-markdown-editor .cm-content {
|
|
padding-left: var(--size-4-2) !important;
|
|
padding-right: var(--size-4-2) !important;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
font-family: var(--font-text);
|
|
font-size: var(--font-ui-medium);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
|
|
.nl-markdown-editor .cm-placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
CODEMIRROR AUTOCOMPLETE STYLING (for NLP triggers)
|
|
Scoped to TaskNotes modals only
|
|
===================================================================== */
|
|
|
|
/* Main autocomplete tooltip - scoped to TaskNotes modals */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--shadow-s);
|
|
padding: var(--size-4-1);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--font-ui-small);
|
|
z-index: 9999;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Autocomplete list */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Individual completion option */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete li {
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
cursor: var(--cursor);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
/* Hovered option */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete li:hover,
|
|
.tasknotes-plugin .cm-tooltip-autocomplete li[aria-selected="true"] {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Selected option */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete li[aria-selected="true"] {
|
|
background-color: var(--background-modifier-active-hover);
|
|
}
|
|
|
|
/* Completion label (main text) */
|
|
.tasknotes-plugin .cm-completionLabel {
|
|
flex: 1;
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Completion info (right side) */
|
|
.tasknotes-plugin .cm-completionInfo {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Completion detail (description) */
|
|
.tasknotes-plugin .cm-completionDetail {
|
|
color: var(--text-faint);
|
|
font-size: var(--font-ui-smaller);
|
|
margin-left: var(--size-4-2);
|
|
}
|
|
|
|
/* Icon for different completion types */
|
|
.tasknotes-plugin .cm-completionIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: var(--size-4-2);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Match highlighting in completion */
|
|
.tasknotes-plugin .cm-completionMatchedText {
|
|
text-decoration: underline;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal {
|
|
/* Modal container adjustments */
|
|
}
|
|
|
|
/* Modal header with TaskNotes icon */
|
|
.modal-header-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.modal-header-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
color: var(--color-accent);
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.modal-header-icon svg {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* User fields section styling */
|
|
.user-fields-separator {
|
|
margin-top: var(--size-4-4);
|
|
border-top: 0.5px solid var(--background-modifier-border);
|
|
padding-top: var(--size-4-3);
|
|
}
|
|
|
|
/* Section separator between field groups */
|
|
.tasknotes-plugin .task-modal__section-separator {
|
|
border: none;
|
|
border-top: 0.5px solid var(--background-modifier-border);
|
|
margin: var(--size-4-3) 0;
|
|
}
|
|
|
|
.detail-label-section {
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
margin-bottom: var(--size-4-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.modal-header-icon .svg-icon {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
}
|
|
|
|
.modal-header-icon .tasknotes-simple {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
color: var(--color-accent) !important;
|
|
}
|
|
|
|
.modal-header-title {
|
|
font-size: var(--font-ui-larger);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal .modal-content {
|
|
padding: 0;
|
|
border-radius: var(--radius-l);
|
|
box-shadow: var(--shadow-l);
|
|
min-width: 480px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.tasknotes-plugin .minimalist-modal-container {
|
|
padding: var(--size-4-4);
|
|
background: var(--modal-background);
|
|
}
|
|
|
|
/* Override shadow variable inside the modal, then re-apply outer shadow explicitly */
|
|
.theme-light .tasknotes-plugin.minimalist-task-modal,
|
|
.theme-dark .tasknotes-plugin.minimalist-task-modal {
|
|
--shadow-l: none;
|
|
}
|
|
|
|
/* Re-apply outer shadow to the modal element itself */
|
|
.tasknotes-plugin.minimalist-task-modal > .modal {
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* =====================================================================
|
|
TITLE INPUT - PRIMARY FOCUS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .title-input-container {
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .title-input {
|
|
width: 100%;
|
|
padding: var(--size-4-2) var(--size-4-1);
|
|
font-size: var(--font-ui-large);
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
resize: none;
|
|
min-height: 44px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .title-input::placeholder {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tasknotes-plugin .title-input:focus,
|
|
.tasknotes-plugin .title-input:active,
|
|
.tasknotes-plugin .title-input:focus-visible {
|
|
background: var(--background-modifier-hover);
|
|
border-radius: var(--radius-s);
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
ACTION BAR - ICON-BASED CONTROLS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .action-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-1);
|
|
margin-bottom: var(--size-4-3);
|
|
padding: var(--size-4-1) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .action-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius-s);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .action-icon:hover {
|
|
background: var(--background-modifier-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.tasknotes-plugin .action-icon .icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-muted);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .action-icon:hover .icon {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Active state for icons when they have values - only show the dot */
|
|
.tasknotes-plugin .action-icon.has-value {
|
|
/* Remove full background colorization */
|
|
}
|
|
|
|
.tasknotes-plugin .action-icon.has-value::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--color-accent);
|
|
border: 2px solid var(--background-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DETAILS SECTION - PROGRESSIVE DISCLOSURE
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .details-container {
|
|
transition: all 0.3s ease;
|
|
transform-origin: top;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-label {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--size-4-1);
|
|
margin-top: var(--size-4-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-label:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .title-input-detailed {
|
|
width: 100%;
|
|
padding: var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .title-input-detailed:focus,
|
|
.tasknotes-plugin .title-input-detailed:active,
|
|
.tasknotes-plugin .title-input-detailed:focus-visible {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .title-input-detailed::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .details-input {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
line-height: 1.5;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
resize: vertical;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .details-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .details-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
ADDITIONAL FIELDS - SETTINGS STYLE
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .details-container .setting-item {
|
|
border: none;
|
|
padding: var(--size-4-2) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .details-container .setting-item-name {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .details-container .setting-item-control input {
|
|
background: transparent;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .details-container .setting-item-control input:focus {
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
OPEN NOTE BUTTON (IN BUTTON BAR)
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .open-note-button {
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
font-weight: 500;
|
|
border: 1px solid var(--interactive-accent);
|
|
border-radius: var(--radius-s);
|
|
background: transparent;
|
|
color: var(--interactive-accent);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.tasknotes-plugin .open-note-button:hover {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: 1px solid var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .open-note-button:active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: 1px solid var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .open-note-button:focus-visible {
|
|
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.tasknotes-plugin .archive-button:focus-visible {
|
|
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
/* =====================================================================
|
|
MODAL BUTTON CONTAINER - Native Obsidian style
|
|
===================================================================== */
|
|
|
|
/* Use native modal-button-container class */
|
|
.modal.mod-tasknotes .modal-button-container {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
/* Push Save/Cancel buttons to the right on desktop only */
|
|
body:not(.is-mobile) .modal.mod-tasknotes .modal-button-container .mod-cta {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* =====================================================================
|
|
MODAL EXPANSION ANIMATION
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin.minimalist-task-modal .modal-content {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal.expanded .modal-content {
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
RESPONSIVE DESIGN
|
|
===================================================================== */
|
|
|
|
@media (max-width: 600px) {
|
|
.tasknotes-plugin.minimalist-task-modal .modal-content {
|
|
min-width: 90vw;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.tasknotes-plugin .minimalist-modal-container {
|
|
padding: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .action-bar {
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.modal.mod-tasknotes .modal-button-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal.mod-tasknotes .modal-button-container button {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Reset margin for small screens on desktop too */
|
|
.modal.mod-tasknotes .modal-button-container .mod-cta {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
SPLIT LAYOUT - BASE STYLES (mobile/narrow screens)
|
|
On narrow screens, content flows vertically with details below title
|
|
===================================================================== */
|
|
|
|
/* Split content wrapper - use flex column for ordering on narrow screens */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Left column: contains title, action bar, and form fields */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left {
|
|
display: contents;
|
|
}
|
|
|
|
/* Title input container - first item */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .title-input-container,
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .nl-markdown-editor {
|
|
order: 1;
|
|
}
|
|
|
|
/* Action bar - second item */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .action-bar {
|
|
order: 2;
|
|
}
|
|
|
|
/* Right column: contains details editor - appears after action bar on narrow screens */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-right {
|
|
order: 3;
|
|
}
|
|
|
|
/* Details container (form fields) - after the details editor on narrow screens */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .details-container {
|
|
order: 4;
|
|
}
|
|
|
|
/* Additional sections (completions calendar, metadata) - last */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .completions-calendar-container,
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-left .metadata-container {
|
|
order: 5;
|
|
}
|
|
|
|
/* Hide empty right column indicator on narrow screens */
|
|
.tasknotes-plugin.minimalist-task-modal .modal-split-right:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
SPLIT LAYOUT - WIDE SCREENS (900px+)
|
|
Details field appears on the right when modal is expanded
|
|
Only applies when split-layout-enabled class is present (controlled by setting)
|
|
===================================================================== */
|
|
|
|
@media (min-width: 900px) {
|
|
/* Widen modal for split layout when expanded */
|
|
/* Target both .modal (modalEl) and .modal-content for max compatibility */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded.modal {
|
|
width: 850px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-content {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Main container - no padding on right for edge-to-edge details */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .minimalist-modal-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Split content wrapper - holds left and right columns side by side */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
min-height: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
/* Left column - reset display:contents and use flex column */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left {
|
|
flex: 0 0 380px;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-right: var(--size-4-4);
|
|
overflow-y: auto;
|
|
max-height: 70vh;
|
|
}
|
|
|
|
/* Reset ordering for split layout - elements flow naturally in their DOM order */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .title-input-container,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .nl-markdown-editor,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .action-bar,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .details-container,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .completions-calendar-container,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .metadata-container,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right {
|
|
order: unset;
|
|
}
|
|
|
|
/* Right column - details editor takes full height, edge to edge */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--background-modifier-border);
|
|
margin: calc(-1 * var(--size-4-4)) 0;
|
|
margin-right: calc(-1 * var(--size-4-4));
|
|
border-radius: 0;
|
|
max-height: 70vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hide empty right column on wide screens too */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* When right column is empty, left column takes full width */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right:empty ~ .modal-split-left,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content:has(.modal-split-right:empty) .modal-split-left {
|
|
flex: 1;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Details label in right column */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .detail-label {
|
|
margin: 0;
|
|
padding: var(--size-4-3) var(--size-4-4);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Make details editor fill the right column completely */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor {
|
|
flex: 1;
|
|
min-height: 0;
|
|
max-height: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: none;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-editor {
|
|
flex: 1;
|
|
max-height: none;
|
|
border-radius: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-scroller {
|
|
max-height: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .task-details-editor {
|
|
max-height: none;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Button container needs proper positioning */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-button-container {
|
|
padding-right: var(--size-4-4);
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
SPLIT LAYOUT - EXTRA WIDE SCREENS (1200px+)
|
|
Modal expands to 1100px on larger screens
|
|
===================================================================== */
|
|
|
|
@media (min-width: 1200px) {
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal,
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded.modal {
|
|
width: 1100px;
|
|
}
|
|
|
|
/* Left column gets more space on wider screens */
|
|
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left {
|
|
flex: 0 0 480px;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
ACCESSIBILITY ENHANCEMENTS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .action-icon:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px var(--interactive-accent);
|
|
transition: box-shadow 0.15s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .details-input:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
METADATA SECTION - FOR EDIT MODAL
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .metadata-container {
|
|
margin-top: var(--size-4-3);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 0.5px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .metadata-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .metadata-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .metadata-key {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.tasknotes-plugin .metadata-value {
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* =====================================================================
|
|
AUTOCOMPLETE STYLING
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .autocomplete-suggestions {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--radius-s) var(--radius-s);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .autocomplete-suggestion {
|
|
padding: 8px 12px;
|
|
cursor: var(--cursor);
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .autocomplete-suggestion:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .autocomplete-suggestion:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
NLP INPUT STYLING UPDATES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .nl-input {
|
|
width: 100%;
|
|
padding: var(--size-4-3) var(--size-4-2);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input::placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =====================================================================
|
|
COMPLETIONS CALENDAR SECTION
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .completions-calendar-container {
|
|
margin-top: var(--size-4-3);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 0.5px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .completions-calendar-content {
|
|
max-width: 200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* =====================================================================
|
|
RECURRING CALENDAR COMPONENT - BEM & MINIMALIST
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .metadata-item--calendar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar {
|
|
margin-top: var(--size-4-1);
|
|
font-size: var(--font-ui-small);
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__nav {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
font-size: 14px;
|
|
padding: 2px 4px;
|
|
transition: color 0.1s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__nav:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__month {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--faded {
|
|
color: var(--text-faint);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--clickable {
|
|
cursor: var(--cursor);
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--clickable:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--recurring {
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--recurring:hover {
|
|
border-color: var(--interactive-accent);
|
|
color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--completed {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: 1px solid var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--completed:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--skipped {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--text-faint);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.tasknotes-plugin .recurring-calendar__day--skipped:hover {
|
|
background: rgba(128, 128, 128, 0.4);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-container {
|
|
margin-top: var(--size-4-2);
|
|
padding: var(--size-4-2);
|
|
background: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
word-break: break-all;
|
|
margin-bottom: var(--size-4-1);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-label {
|
|
min-width: 80px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-right: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-value {
|
|
color: var(--text-normal);
|
|
flex: 1;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DARK MODE ADJUSTMENTS
|
|
===================================================================== */
|
|
|
|
.theme-dark .tasknotes-plugin .action-icon.has-value::after {
|
|
border-color: var(--background-primary-alt);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .autocomplete-suggestions {
|
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* NLP Auto-suggestion specific styles */
|
|
.tasknotes-plugin .nlp-suggest-icon {
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
color: var(--interactive-accent);
|
|
margin-right: var(--size-2-2);
|
|
min-width: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .nlp-suggest-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* NLP Project Suggestion Styles - Rich Metadata Display (Textarea-based suggester in TaskCreationModal) */
|
|
.tasknotes-plugin .nlp-suggest-project__filename {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .nlp-suggest-project__meta {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-plugin .nlp-suggest-project__meta-label {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .nlp-suggest-project__meta-value {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* CodeMirror Project Suggestion Styles - Rich Metadata Display */
|
|
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: var(--size-4-1) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__name {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-label {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-value {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* =====================================================================
|
|
PROJECT SELECTION UI
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .task-projects-list {
|
|
margin-top: var(--size-4-2);
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .task-projects-empty {
|
|
padding: var(--size-4-3);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
border: none;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--size-4-2);
|
|
border: none;
|
|
gap: var(--size-4-2);
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-item:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-name {
|
|
display: block;
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-item--unresolved {
|
|
border: 1px solid var(--color-orange);
|
|
background: color-mix(in srgb, var(--color-orange) 12%, var(--background-secondary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-item--unresolved .task-project-name {
|
|
color: var(--color-orange);
|
|
}
|
|
|
|
/* Make clickable project names in edit modal look and behave like links */
|
|
.tasknotes-plugin .clickable-project .internal-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
cursor: var(--cursor);
|
|
font-weight: var(--font-weight-medium);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-xs);
|
|
padding: 1px 2px;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .clickable-project .internal-link:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--link-color-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Remove the default + prefix for clickable projects since they're now clearly links */
|
|
.tasknotes-plugin .clickable-project .internal-link::before {
|
|
content: '+';
|
|
color: var(--text-muted);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* Style dependency items the same way when rendered as internal links */
|
|
.tasknotes-plugin .clickable-dependency .task-dependency-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
cursor: var(--cursor);
|
|
font-weight: var(--font-weight-medium);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-xs);
|
|
padding: 1px 2px;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .clickable-dependency .task-dependency-link:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--link-color-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-path {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Use consistent button system for project remove button */
|
|
.tasknotes-plugin .task-project-remove {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tasknotes-plugin .task-project-remove:hover {
|
|
background: var(--tn-color-error);
|
|
color: var(--tn-bg-primary);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
PROJECT SELECT MODAL
|
|
===================================================================== */
|
|
|
|
/* Use consistent button system for project suggestions */
|
|
.tasknotes-plugin .project-suggestion {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: var(--size-4-2);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.tasknotes-plugin .project-suggestion:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .project-name {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .project-path {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
|
|
/* ===== REMINDER-MODAL.CSS ===== */
|
|
/* =====================================================================
|
|
REMINDER MODAL - Consistent with Task Modal Styling
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .tasknotes-reminder-modal {
|
|
max-width: 600px;
|
|
min-width: 480px;
|
|
min-height: 400px;
|
|
max-height: 75vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: var(--radius-l);
|
|
box-shadow: var(--shadow-l);
|
|
}
|
|
|
|
/* =====================================================================
|
|
HEADER SECTION
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__header {
|
|
padding: var(--size-4-4) var(--size-4-4) var(--size-4-3);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__header h2 {
|
|
margin: 0 0 var(--size-4-1) 0;
|
|
font-size: var(--font-ui-large);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__task-title {
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
color: var(--interactive-accent);
|
|
display: block;
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__task-dates {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =====================================================================
|
|
CONTENT AREA
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__content {
|
|
flex: 1;
|
|
padding: var(--size-4-4);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
/* Section Styling - Match Task Modal Details */
|
|
.tasknotes-plugin .reminder-modal__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__section-header h3 {
|
|
margin: 0;
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-count {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Empty State - Match Task Modal Secondary Background */
|
|
.tasknotes-plugin .reminder-modal__empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--size-4-3);
|
|
text-align: center;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
border: 1px dashed var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__empty-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--text-faint);
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__empty-text {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* =====================================================================
|
|
REMINDER CARDS - Match Task Modal Item Styling
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
padding: var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-card:hover {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--interactive-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-primary {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-description {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--interactive-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__reminder-actions {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__action-btn {
|
|
padding: var(--size-4-1);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__action-btn:hover {
|
|
color: var(--text-error);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* =====================================================================
|
|
QUICK ACTIONS - Icon-Based Controls Like Task Modal
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-actions {
|
|
padding: var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-buttons {
|
|
display: flex;
|
|
gap: var(--size-4-1);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-4-1);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-btn-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-btn-label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* =====================================================================
|
|
FORM STYLING - Match Task Modal Input Styles
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin-top: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__type-selector {
|
|
display: flex;
|
|
background: var(--background-primary);
|
|
border-radius: var(--radius-s);
|
|
padding: 2px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__type-tab {
|
|
flex: 1;
|
|
padding: var(--size-4-1) var(--size-4-3);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
text-align: center;
|
|
font-size: var(--font-ui-small);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__type-tab--active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__type-tab:not(.reminder-modal__type-tab--active):hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .relative-fields,
|
|
.tasknotes-plugin .absolute-fields {
|
|
padding: var(--size-4-2);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .absolute-fields {
|
|
display: none;
|
|
}
|
|
|
|
/* Form controls - Match Task Modal Details Section */
|
|
.tasknotes-plugin .reminder-modal__form .setting-item {
|
|
padding: var(--size-4-2) 0;
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__form .setting-item-name {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__form .setting-item-control input,
|
|
.tasknotes-plugin .reminder-modal__form .setting-item-control select {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__form .setting-item-control input:focus,
|
|
.tasknotes-plugin .reminder-modal__form .setting-item-control select:focus {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-add-btn {
|
|
align-self: flex-start;
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
background: var(--tn-interactive-accent, var(--interactive-accent));
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-add-btn:hover {
|
|
background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-add-btn:disabled,
|
|
.tasknotes-plugin .reminder-add-btn--loading {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-add-btn--loading .reminder-add-btn-icon {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* =====================================================================
|
|
ACTION BUTTONS - Match Task Modal Button Container
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-modal__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-4-4);
|
|
padding: var(--size-4-3) var(--size-4-4);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__save-btn,
|
|
.tasknotes-plugin .reminder-modal__cancel-btn {
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
font-weight: 500;
|
|
font-size: var(--font-ui-medium);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-s);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__save-btn {
|
|
background: var(--tn-interactive-accent, var(--interactive-accent));
|
|
color: var(--text-on-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__save-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__save-btn:not(:disabled):hover {
|
|
background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__cancel-btn {
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__cancel-btn:hover {
|
|
background: var(--tn-interactive-hover, var(--background-modifier-hover));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
RESPONSIVE DESIGN - Match Task Modal Breakpoints
|
|
===================================================================== */
|
|
|
|
@media (max-width: 600px) {
|
|
.tasknotes-plugin .tasknotes-reminder-modal {
|
|
min-width: 90vw;
|
|
max-width: 90vw;
|
|
min-height: 60vh;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__quick-buttons {
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__actions {
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__save-btn,
|
|
.tasknotes-plugin .reminder-modal__cancel-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-modal__shortcuts {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
DARK MODE ADJUSTMENTS - Match Task Modal
|
|
===================================================================== */
|
|
|
|
.theme-dark .tasknotes-plugin .tasknotes-reminder-modal {
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* =====================================================================
|
|
BACKWARD COMPATIBILITY
|
|
===================================================================== */
|
|
.reminder-section {
|
|
margin-bottom: var(--size-4-6);
|
|
}
|
|
|
|
.reminder-section h3 {
|
|
margin-bottom: var(--size-4-3);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-md);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.no-reminders {
|
|
padding: var(--size-4-4);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.reminder-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.reminder-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--size-4-3);
|
|
padding: var(--size-4-3);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-m);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.reminder-item__content {
|
|
flex: 1;
|
|
}
|
|
|
|
.reminder-item__timing {
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--text-normal);
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
|
|
.reminder-item__description {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-accent);
|
|
margin-bottom: var(--size-4-1);
|
|
font-style: italic;
|
|
}
|
|
|
|
.reminder-item__details {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.reminder-item__actions {
|
|
display: flex;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.reminder-item__remove-btn {
|
|
padding: var(--size-4-1);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.reminder-item__remove-btn:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.reminder-form {
|
|
padding: var(--size-4-4);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-m);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Modal button styling */
|
|
.modal-button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-4-6);
|
|
padding-top: var(--size-4-4);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* =====================================================================
|
|
REMINDER DEFAULTS SECTION - Settings Tab Styling
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .reminder-defaults-section {
|
|
margin-bottom: var(--size-4-4);
|
|
padding: var(--size-4-3);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-list {
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
/* Empty State */
|
|
.tasknotes-plugin .reminder-defaults-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--size-4-3);
|
|
text-align: center;
|
|
background: var(--background-primary);
|
|
border-radius: var(--radius-s);
|
|
border: 1px dashed var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-empty-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--text-faint);
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-empty-text {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Reminder Items */
|
|
.tasknotes-plugin .reminder-defaults-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
padding: var(--size-4-2);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-card:hover {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--interactive-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-primary {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-description {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--interactive-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-actions {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-remove-btn {
|
|
padding: var(--size-4-1);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-remove-btn:hover {
|
|
color: var(--text-error);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Form Styling */
|
|
.tasknotes-plugin .reminder-defaults-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin-top: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-form-header {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Type Selector */
|
|
.tasknotes-plugin .reminder-defaults-type-selector {
|
|
display: flex;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
padding: 2px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-type-tab {
|
|
flex: 1;
|
|
padding: var(--size-4-1) var(--size-4-3);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
text-align: center;
|
|
font-size: var(--font-ui-small);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-type-tab--active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-type-tab:not(.reminder-defaults-type-tab--active):hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Form Fields */
|
|
.tasknotes-plugin .reminder-defaults-relative-fields,
|
|
.tasknotes-plugin .reminder-defaults-absolute-fields {
|
|
padding: var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-absolute-fields {
|
|
display: none;
|
|
}
|
|
|
|
/* Form controls - Match Task Modal Details Section */
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item {
|
|
padding: var(--size-4-2) 0;
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item-name {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item-control input,
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item-control select {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item-control input:focus,
|
|
.tasknotes-plugin .reminder-defaults-form .setting-item-control select:focus {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-secondary);
|
|
outline: none;
|
|
}
|
|
|
|
/* Add Button */
|
|
.tasknotes-plugin .reminder-defaults-add-btn {
|
|
align-self: flex-start;
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
background: var(--tn-interactive-accent, var(--interactive-accent));
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-add-btn:hover {
|
|
background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-add-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-add-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .reminder-defaults-add-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== DATE-PICKER.CSS ===== */
|
|
/* =====================================================================
|
|
DATE PICKER MODAL - Enhanced Input Styling
|
|
===================================================================== */
|
|
|
|
/* Date picker modal container */
|
|
.date-picker-modal {
|
|
font-family: var(--font-interface);
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-4-4);
|
|
box-shadow: var(--shadow-l);
|
|
z-index: 1000;
|
|
min-width: 320px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Modal header */
|
|
.date-picker-modal__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
margin-bottom: var(--size-4-4);
|
|
padding-bottom: var(--size-4-2);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.date-picker-modal__header-icon {
|
|
color: var(--interactive-accent);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.date-picker-modal__header-title {
|
|
margin: 0;
|
|
font-size: var(--font-ui-large);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Input sections */
|
|
.date-picker-modal__section {
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.date-picker-modal__section--buttons {
|
|
margin-bottom: var(--size-4-4);
|
|
}
|
|
|
|
.date-picker-modal__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-1);
|
|
margin-bottom: var(--size-4-2);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.date-picker-modal__label-icon {
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.date-picker-modal__input-container {
|
|
position: relative;
|
|
}
|
|
|
|
.date-picker-modal__input {
|
|
width: 100%;
|
|
padding: var(--size-4-3) var(--size-4-2);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
cursor: var(--cursor);
|
|
color-scheme: dark light;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.date-picker-modal__input:focus {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent), 0.2);
|
|
}
|
|
|
|
.date-picker-modal__input:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Button section */
|
|
.date-picker-modal__buttons {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
justify-content: flex-end;
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.date-picker-modal__button {
|
|
padding: var(--size-4-2) var(--size-4-4);
|
|
border-radius: var(--radius-s);
|
|
cursor: var(--cursor);
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
}
|
|
|
|
.date-picker-modal__button--primary {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.date-picker-modal__button--primary:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.date-picker-modal__button--secondary {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.date-picker-modal__button--secondary:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Enhanced date and time input styling */
|
|
.date-picker-modal input[type="date"],
|
|
.date-picker-modal input[type="time"] {
|
|
/* Reset browser defaults */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: textfield;
|
|
appearance: none;
|
|
|
|
/* Make the entire input clickable */
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
/* Ensure consistent sizing */
|
|
box-sizing: border-box;
|
|
height: 44px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Date input specific styling */
|
|
.date-picker-modal input[type="date"] {
|
|
/* Improve positioning consistency */
|
|
position: relative;
|
|
/* Ensure text is properly aligned */
|
|
text-align: left;
|
|
/* Add padding to make room for icon on the right */
|
|
padding-right: 32px;
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit,
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit-text,
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit-month-field,
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit-day-field,
|
|
.date-picker-modal input[type="date"]::-webkit-datetime-edit-year-field {
|
|
/* Make the date text clickable */
|
|
cursor: var(--cursor);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
.date-picker-modal input[type="date"]::-webkit-calendar-picker-indicator {
|
|
/* Position the calendar icon on the right, consistently with time input */
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: var(--cursor);
|
|
opacity: 0.7;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: none;
|
|
color: var(--text-muted);
|
|
/* Ensure the icon is clickable */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.date-picker-modal input[type="date"]:hover::-webkit-calendar-picker-indicator {
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Time input specific styling - add consistent padding */
|
|
.date-picker-modal input[type="time"] {
|
|
/* Add padding to make room for icon on the right */
|
|
padding-right: 32px;
|
|
text-align: left;
|
|
}
|
|
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit,
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit-fields-wrapper,
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit-text,
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit-hour-field,
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit-minute-field,
|
|
.date-picker-modal input[type="time"]::-webkit-datetime-edit-ampm-field {
|
|
/* Make the time text clickable */
|
|
cursor: var(--cursor);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
.date-picker-modal input[type="time"]::-webkit-calendar-picker-indicator {
|
|
/* Position the clock icon on the right, same as date input */
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: var(--cursor);
|
|
opacity: 0.7;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: none;
|
|
color: var(--text-muted);
|
|
/* Ensure the icon is clickable */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.date-picker-modal input[type="time"]:hover::-webkit-calendar-picker-indicator {
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Firefox specific styling */
|
|
@-moz-document url-prefix() {
|
|
.date-picker-modal input[type="date"],
|
|
.date-picker-modal input[type="time"] {
|
|
/* Firefox doesn't have the same issue but ensure consistency */
|
|
cursor: var(--cursor);
|
|
}
|
|
}
|
|
|
|
/* Focus states */
|
|
.date-picker-modal input[type="date"]:focus,
|
|
.date-picker-modal input[type="time"]:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent), 0.2);
|
|
}
|
|
|
|
/* Hover states */
|
|
.date-picker-modal input[type="date"]:hover,
|
|
.date-picker-modal input[type="time"]:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.date-picker-modal input[type="date"],
|
|
.date-picker-modal input[type="time"] {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/* Light mode support */
|
|
@media (prefers-color-scheme: light) {
|
|
.date-picker-modal input[type="date"],
|
|
.date-picker-modal input[type="time"] {
|
|
color-scheme: light;
|
|
}
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
.date-picker-modal input[type="date"]:focus-visible,
|
|
.date-picker-modal input[type="time"]:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Ensure consistent appearance across browsers */
|
|
.date-picker-modal input[type="date"]::-ms-clear,
|
|
.date-picker-modal input[type="time"]::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
.date-picker-modal input[type="date"]::-ms-reveal,
|
|
.date-picker-modal input[type="time"]::-ms-reveal {
|
|
display: none;
|
|
}
|
|
|
|
/* ===== TASK-SELECTOR-WITH-CREATE-MODAL.CSS ===== */
|
|
/* ================================================
|
|
TASK SELECTOR WITH CREATE MODAL
|
|
================================================ */
|
|
|
|
/* Modal container adjustments */
|
|
.task-selector-with-create-modal .prompt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ================================================
|
|
TASK CARD STYLING WITHIN MODAL
|
|
================================================ */
|
|
|
|
/* Remove task card hover/background styling - let suggestion item handle it */
|
|
.task-selector-with-create-modal .task-card {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
padding: var(--tn-spacing-sm) 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.task-selector-with-create-modal .task-card:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Hide context menu icon in modal suggestions */
|
|
.task-selector-with-create-modal .task-card__context-menu {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide badges container in modal for cleaner look */
|
|
.task-selector-with-create-modal .task-card__badges {
|
|
display: none;
|
|
}
|
|
|
|
/* ================================================
|
|
CREATE FOOTER - Fixed at bottom of modal
|
|
================================================ */
|
|
|
|
.task-selector-create-footer {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
background: var(--background-secondary);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
margin-top: auto;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.task-selector-create-footer__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--text-accent);
|
|
flex-shrink: 0;
|
|
opacity: 0.8;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.task-selector-create-footer__icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.task-selector-create-footer__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
TITLE LINE
|
|
================================================ */
|
|
|
|
.task-selector-create-footer__title-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.task-selector-create-footer__title {
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--text-normal);
|
|
line-height: 1.3;
|
|
/* Allow wrapping for long titles */
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* ================================================
|
|
METADATA CHIPS
|
|
================================================ */
|
|
|
|
.task-selector-create-footer__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.task-selector-create-footer__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-selector-create-footer__chip-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-selector-create-footer__chip-icon svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.task-selector-create-footer__chip-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Chip type variants */
|
|
.task-selector-create-footer__chip--due {
|
|
background-color: hsla(0, 70%, 50%, 0.15);
|
|
color: hsl(0, 70%, 45%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--scheduled {
|
|
background-color: hsla(200, 70%, 50%, 0.15);
|
|
color: hsl(200, 70%, 40%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--priority {
|
|
background-color: hsla(35, 90%, 50%, 0.15);
|
|
color: hsl(35, 90%, 40%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--status {
|
|
background-color: hsla(270, 50%, 50%, 0.15);
|
|
color: hsl(270, 50%, 45%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--context {
|
|
background-color: hsla(160, 60%, 45%, 0.15);
|
|
color: hsl(160, 60%, 35%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--project {
|
|
background-color: hsla(220, 70%, 50%, 0.15);
|
|
color: hsl(220, 70%, 45%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--tag {
|
|
background-color: hsla(280, 60%, 50%, 0.15);
|
|
color: hsl(280, 60%, 45%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--recurrence {
|
|
background-color: hsla(180, 60%, 45%, 0.15);
|
|
color: hsl(180, 60%, 35%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--estimate {
|
|
background-color: hsla(45, 80%, 50%, 0.15);
|
|
color: hsl(45, 80%, 35%);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--details {
|
|
background-color: hsla(0, 0%, 50%, 0.15);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-selector-create-footer__chip--userfield {
|
|
background-color: hsla(300, 40%, 50%, 0.15);
|
|
color: hsl(300, 40%, 40%);
|
|
}
|
|
|
|
/* ================================================
|
|
HINT LINE
|
|
================================================ */
|
|
|
|
.task-selector-create-footer__hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.task-selector-create-footer__shortcut {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
background-color: var(--background-modifier-border);
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.task-selector-create-footer__hint-text {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ================================================
|
|
DARK THEME ADJUSTMENTS
|
|
================================================ */
|
|
|
|
.theme-dark .task-selector-create-footer {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__shortcut {
|
|
background-color: var(--background-modifier-form-field);
|
|
}
|
|
|
|
/* Dark theme chip adjustments for better visibility */
|
|
.theme-dark .task-selector-create-footer__chip--due {
|
|
background-color: hsla(0, 70%, 60%, 0.2);
|
|
color: hsl(0, 70%, 65%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--scheduled {
|
|
background-color: hsla(200, 70%, 60%, 0.2);
|
|
color: hsl(200, 70%, 65%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--priority {
|
|
background-color: hsla(35, 90%, 60%, 0.2);
|
|
color: hsl(35, 90%, 65%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--status {
|
|
background-color: hsla(270, 50%, 60%, 0.2);
|
|
color: hsl(270, 50%, 70%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--context {
|
|
background-color: hsla(160, 60%, 55%, 0.2);
|
|
color: hsl(160, 60%, 60%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--project {
|
|
background-color: hsla(220, 70%, 60%, 0.2);
|
|
color: hsl(220, 70%, 70%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--tag {
|
|
background-color: hsla(280, 60%, 60%, 0.2);
|
|
color: hsl(280, 60%, 70%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--recurrence {
|
|
background-color: hsla(180, 60%, 55%, 0.2);
|
|
color: hsl(180, 60%, 60%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--estimate {
|
|
background-color: hsla(45, 80%, 60%, 0.2);
|
|
color: hsl(45, 80%, 65%);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--details {
|
|
background-color: hsla(0, 0%, 60%, 0.2);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.theme-dark .task-selector-create-footer__chip--userfield {
|
|
background-color: hsla(300, 40%, 60%, 0.2);
|
|
color: hsl(300, 40%, 70%);
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE ADJUSTMENTS
|
|
================================================ */
|
|
|
|
@media (max-width: 480px) {
|
|
.task-selector-create-footer {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.task-selector-create-footer__icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.task-selector-create-footer__icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.task-selector-create-footer__title {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.task-selector-create-footer__chip {
|
|
max-width: 120px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.task-selector-create-footer__meta {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== FILE-SELECTOR-MODAL.CSS ===== */
|
|
/* ================================================
|
|
FILE SELECTOR MODAL
|
|
================================================ */
|
|
|
|
/* ================================================
|
|
SUGGESTION STYLING
|
|
================================================ */
|
|
|
|
.file-selector-suggestion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: var(--tn-spacing-xs) 0;
|
|
}
|
|
|
|
.file-selector-suggestion__name {
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.file-selector-suggestion__title,
|
|
.file-selector-suggestion__aliases {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-selector-suggestion__path {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ================================================
|
|
CREATE FOOTER
|
|
================================================ */
|
|
|
|
.file-selector-create-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
background: var(--background-secondary);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
margin-top: auto;
|
|
}
|
|
|
|
.file-selector-create-footer__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.file-selector-create-footer__title-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.file-selector-create-footer__shortcut {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background-color: var(--background-modifier-border);
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.file-selector-create-footer__hint-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.file-selector-create-footer__filename {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ================================================
|
|
DARK THEME ADJUSTMENTS
|
|
================================================ */
|
|
|
|
.theme-dark .file-selector-create-footer {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.theme-dark .file-selector-create-footer__shortcut {
|
|
background-color: var(--background-modifier-form-field);
|
|
}
|
|
|
|
|
|
/* ===== UNSCHEDULED-TASKS-SELECTOR-MODAL.CSS ===== */
|
|
/* Unscheduled Tasks Selector - Task Styling Only */
|
|
.unscheduled-tasks-selector__content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__title {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.3;
|
|
flex: 1;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__title mark {
|
|
background: var(--text-selection);
|
|
color: var(--text-normal);
|
|
padding: 0.1em 0.2em;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__priority {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__priority.priority-high {
|
|
background: var(--color-red);
|
|
color: white;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__priority.priority-normal {
|
|
background: var(--color-yellow);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.unscheduled-tasks-selector__priority.priority-low {
|
|
background: var(--color-green);
|
|
color: white;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__due {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__due.overdue {
|
|
color: var(--color-red);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__due.due-today {
|
|
color: var(--color-orange);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__time-estimate {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-border);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__contexts {
|
|
font-size: 0.75rem;
|
|
color: var(--text-accent);
|
|
background: var(--background-modifier-border);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.unscheduled-tasks-selector__projects {
|
|
font-size: 0.75rem;
|
|
color: var(--text-accent);
|
|
background: var(--background-modifier-border);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Project Links - for [[Note Name]] format projects */
|
|
.unscheduled-tasks-selector__project-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
border-radius: 4px;
|
|
padding: 1px 2px;
|
|
margin: -1px -2px;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.unscheduled-tasks-selector__project-link:hover {
|
|
background: var(--background-modifier-hover);
|
|
text-decoration: underline;
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
.unscheduled-tasks-selector__schedule-icon {
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ===== TASK-ACTION-PALETTE-MODAL.CSS ===== */
|
|
/* Task Action Palette Modal */
|
|
|
|
.task-action-palette-modal {
|
|
--palette-item-height: 60px;
|
|
--palette-icon-size: 18px;
|
|
--palette-gap: 12px;
|
|
--palette-border-radius: 8px;
|
|
}
|
|
|
|
/* Override default modal width for the action palette */
|
|
.task-action-palette-modal .modal {
|
|
width: min(600px, 90vw);
|
|
max-height: 70vh;
|
|
}
|
|
|
|
/* Suggestion item styling */
|
|
.task-action-palette__suggestion {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--palette-gap);
|
|
padding: var(--palette-gap);
|
|
border-radius: var(--palette-border-radius);
|
|
min-height: var(--palette-item-height);
|
|
cursor: var(--cursor);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.task-action-palette__suggestion:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.suggestion-item.is-selected .task-action-palette__suggestion {
|
|
background-color: var(--background-modifier-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Icon styling */
|
|
.task-action-palette__icon {
|
|
flex-shrink: 0;
|
|
width: var(--palette-icon-size);
|
|
height: var(--palette-icon-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.suggestion-item.is-selected .task-action-palette__icon {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-action-palette__icon svg {
|
|
width: var(--palette-icon-size);
|
|
height: var(--palette-icon-size);
|
|
}
|
|
|
|
/* Content area */
|
|
.task-action-palette__content {
|
|
flex: 1;
|
|
min-width: 0; /* Allow text to truncate */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Title styling */
|
|
.task-action-palette__title {
|
|
font-weight: 500;
|
|
font-size: var(--font-ui-medium);
|
|
line-height: 1.3;
|
|
color: var(--text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.suggestion-item.is-selected .task-action-palette__title {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Description styling */
|
|
.task-action-palette__description {
|
|
font-size: var(--font-ui-small);
|
|
line-height: 1.3;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.suggestion-item.is-selected .task-action-palette__description {
|
|
color: var(--text-on-accent);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Badge area */
|
|
.task-action-palette__badge {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Category badge styling */
|
|
.task-action-palette__category {
|
|
font-size: var(--font-ui-smaller);
|
|
padding: 3px 8px;
|
|
border-radius: calc(var(--palette-border-radius) / 2);
|
|
background-color: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
text-transform: capitalize;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.suggestion-item.is-selected .task-action-palette__category {
|
|
background-color: var(--text-on-accent);
|
|
color: var(--text-accent);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Category-specific colors - theme aware */
|
|
.task-action-palette__category--status {
|
|
background-color: var(--color-blue);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-action-palette__category--priority {
|
|
background-color: var(--color-orange);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-action-palette__category--dates {
|
|
background-color: var(--color-green);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-action-palette__category--tracking {
|
|
background-color: var(--color-purple);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-action-palette__category--organization {
|
|
background-color: var(--color-yellow);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-action-palette__category--other {
|
|
background-color: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 600px) {
|
|
.task-action-palette-modal .modal {
|
|
width: 95vw;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.task-action-palette__suggestion {
|
|
padding: 8px;
|
|
gap: 8px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.task-action-palette__description {
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.task-action-palette__category {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Focus and accessibility */
|
|
.task-action-palette__suggestion:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animation for smooth appearance */
|
|
.task-action-palette-modal .suggestion-container {
|
|
animation: fadeInUp 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ===== TIME-ENTRY-EDITOR-MODAL.CSS ===== */
|
|
/* =====================================================================
|
|
TIME ENTRY EDITOR MODAL
|
|
===================================================================== */
|
|
|
|
.time-entry-editor-modal .modal {
|
|
width: auto;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.time-entry-editor-modal .modal-content {
|
|
width: 600px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.time-entry-editor-modal__entries {
|
|
margin-bottom: var(--size-4-4);
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.time-entry-editor-modal__empty {
|
|
text-align: center;
|
|
padding: var(--size-4-8);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =====================================================================
|
|
TIME ENTRY ITEM
|
|
===================================================================== */
|
|
|
|
.time-entry-editor-modal__entry {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-4-3);
|
|
margin-bottom: var(--size-4-3);
|
|
background: var(--background-secondary);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.time-entry-editor-modal__entry:hover {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.time-entry-editor-modal__entry-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.time-entry-editor-modal__entry-date {
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
}
|
|
|
|
.time-entry-editor-modal__delete-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
padding: var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.time-entry-editor-modal__delete-button:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.time-entry-editor-modal__delete-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
TIME INPUT FIELDS
|
|
===================================================================== */
|
|
|
|
.time-entry-editor-modal__time-container {
|
|
margin-top: var(--size-4-2);
|
|
}
|
|
|
|
.time-entry-editor-modal__time-container .setting-item {
|
|
border: none;
|
|
padding: var(--size-4-2) 0;
|
|
}
|
|
|
|
.time-entry-editor-modal__time-container .setting-item-name {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-entry-editor-modal__time-container .setting-item-control input,
|
|
.time-entry-editor-modal__time-container .setting-item-control textarea {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.time-entry-editor-modal__datetime-input {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
font-size: var(--font-ui-medium);
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
.time-entry-editor-modal__datetime-input:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.time-entry-editor-modal__time-container .setting-item-control input:focus,
|
|
.time-entry-editor-modal__time-container .setting-item-control textarea:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
}
|
|
|
|
.time-entry-editor-modal__time-container .setting-item-control textarea {
|
|
resize: vertical;
|
|
font-family: var(--font-text);
|
|
}
|
|
|
|
.time-entry-editor-modal__duration-info {
|
|
margin-top: var(--size-4-1);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
background: var(--background-primary-alt);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* =====================================================================
|
|
FOOTER
|
|
===================================================================== */
|
|
|
|
.time-entry-editor-modal__add-button-container {
|
|
margin-bottom: var(--size-4-4);
|
|
padding-bottom: var(--size-4-3);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.time-entry-editor-modal__footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.time-entry-editor-modal__total {
|
|
font-weight: 600;
|
|
font-size: var(--font-ui-large);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-entry-editor-modal__buttons {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.time-entry-editor-modal__buttons button {
|
|
min-width: 80px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DARK MODE ADJUSTMENTS
|
|
===================================================================== */
|
|
|
|
.theme-dark .time-entry-editor-modal__entry {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.theme-dark .time-entry-editor-modal__entry:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* =====================================================================
|
|
RESPONSIVE DESIGN
|
|
===================================================================== */
|
|
|
|
@media (max-width: 700px) {
|
|
.time-entry-editor-modal .modal-content {
|
|
width: 90vw;
|
|
}
|
|
|
|
.time-entry-editor-modal__footer {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.time-entry-editor-modal__buttons {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.time-entry-editor-modal__buttons button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== RELATIONSHIPS.CSS ===== */
|
|
/*
|
|
* Relationships Widget
|
|
*
|
|
* Styles for the unified relationships widget that displays subtasks, projects,
|
|
* blocked-by, and blocking relationships in notes via DOM manipulation
|
|
* in live preview mode. Uses BEM methodology.
|
|
*/
|
|
|
|
.tasknotes-relationships-widget {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin: 1.5em 0 2em 0;
|
|
padding: 1em;
|
|
border: 1px dashed var(--background-modifier-border-hover);
|
|
border-radius: var(--radius-s);
|
|
clear: both;
|
|
z-index: 10; /* Higher z-index to allow dropdowns to appear above other content */
|
|
|
|
/* Allow filter dropdowns to extend beyond widget boundaries */
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.tasknotes-plugin .relationships__bases-container {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.tasknotes-plugin .relationships__error {
|
|
color: var(--text-error);
|
|
padding: 1em;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .tasknotes-relationships-widget {
|
|
margin: 1em 0;
|
|
padding: 0.8em;
|
|
}
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
.theme-dark .tasknotes-plugin .tasknotes-relationships-widget {
|
|
background-color: var(--background-secondary);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
|
|
/* ===== TASK-CARD-NOTE-WIDGET.CSS ===== */
|
|
/* Task Card Note Widget - minimal widget for inline task cards in notes */
|
|
|
|
.task-card-note-widget {
|
|
display: block;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
margin: var(--cs-spacing-md) 0;
|
|
padding: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.task-card-note-widget__card {
|
|
/* Reset margins for the inner task card */
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* ===== TASK-LIST-VIEW.CSS ===== */
|
|
/* ================================================
|
|
TASK LIST VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Task List View Container - Root Block */
|
|
.tasknotes-plugin .task-list-view {
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--tn-spacing-sm);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Task List View Header */
|
|
.tasknotes-plugin .task-list-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--tn-spacing-sm) 0;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__title {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Use consistent button system with primary accent background preserved */
|
|
.tasknotes-plugin .task-list-view__add-button {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__add-button:hover {
|
|
background: var(--tn-interactive-accent-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Filter Bar Container */
|
|
.tasknotes-plugin .task-list-view__filter-container {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Task List Container */
|
|
.tasknotes-plugin .task-list-view__tasks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
|
|
/* Loading Indicator */
|
|
.tasknotes-plugin .task-list-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__loading.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Task Group Section */
|
|
.tasknotes-plugin .task-list-view__group {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
justify-content: flex-start;
|
|
padding: var(--tn-spacing-md) 0 var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
position: relative;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.4;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
/* Count element within task list group headers */
|
|
.tasknotes-plugin .task-list-view__group-header .agenda-view__item-count {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* Right side of group header: count + subgroup actions */
|
|
.tasknotes-plugin .task-list-view__group-header { display:flex; align-items:center; }
|
|
.tasknotes-plugin .task-group-right { margin-left:auto; display:flex; align-items:center; gap: var(--tn-spacing-xs); }
|
|
|
|
/* Override count margin when inside right-side container */
|
|
.tasknotes-plugin .task-group-right .agenda-view__item-count { margin-left: 0; margin-right: 0; }
|
|
|
|
/* Chevron/toggle styles (match preview-all) */
|
|
.tasknotes-plugin .task-group-header { cursor: var(--cursor); }
|
|
.task-group-header { display: flex; align-items: center; justify-content: flex-start; gap: var(--tn-spacing-xs); }
|
|
.tasknotes-plugin .task-group-toggle svg, .task-group-toggle .chevron, .task-group-toggle .chevron path { color: var(--tn-text-normal); }
|
|
.tasknotes-plugin .task-group-toggle svg, .task-group-toggle .chevron path { stroke: currentColor; }
|
|
.tasknotes-plugin .task-group.is-collapsed .task-group-toggle svg,
|
|
.tasknotes-plugin .task-group.is-collapsed .task-group-toggle .chevron { transform: rotate(0deg); }
|
|
.tasknotes-plugin .task-group-toggle { display: contents; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: var(--tn-spacing-xs); border: none; background: transparent; color: var(--tn-text-normal); font-size: 14px; line-height: 1; }
|
|
.tasknotes-plugin .task-group-toggle .chevron { transition: transform var(--tn-transition-fast); }
|
|
.tasknotes-plugin .task-group .task-group-toggle .chevron,
|
|
.tasknotes-plugin .task-group .task-group-toggle svg { transform: rotate(90deg); }
|
|
.tasknotes-plugin .task-group.is-collapsed .task-cards { display: none; }
|
|
|
|
/* Subgroup styles and chevron behavior */
|
|
.tasknotes-plugin .task-subgroups-container { margin-left: var(--tn-spacing-lg); }
|
|
.tasknotes-plugin .task-subgroup-header { display:flex; align-items:center; gap: var(--tn-spacing-xs); cursor: pointer; padding: 2px 0; font-size: var(--tn-font-size-lg); font-weight: var(--tn-font-weight-medium); }
|
|
.tasknotes-plugin .task-subgroup-header .agenda-view__item-count { margin-left: auto; }
|
|
.tasknotes-plugin .task-subgroup-toggle { display: contents; align-items:center; justify-content:center; width:16px; height:16px; border:none; background:transparent; color: var(--tn-text-normal); font-size: 12px; line-height: 1; }
|
|
.tasknotes-plugin .task-subgroup-toggle .chevron { transition: transform var(--tn-transition-fast); }
|
|
.tasknotes-plugin .task-subgroup .task-subgroup-toggle .chevron,
|
|
.tasknotes-plugin .task-subgroup .task-subgroup-toggle svg { transform: rotate(90deg); }
|
|
.tasknotes-plugin .task-subgroup.is-collapsed .task-subgroup-toggle .chevron,
|
|
.tasknotes-plugin .task-subgroup.is-collapsed .task-subgroup-toggle svg { transform: rotate(0deg); }
|
|
.tasknotes-plugin .task-subgroup.is-collapsed .task-cards { display: none; }
|
|
.tasknotes-plugin .task-group.is-collapsed .task-subgroups-container { display: none; }
|
|
|
|
/* Per-group subgroup actions */
|
|
.tasknotes-plugin .task-subgroup-actions { display:flex; align-items:center; gap: 4px; margin-left: 0; }
|
|
.tasknotes-plugin .task-subgroup-action { border:none; background:transparent; color: var(--tn-text-muted); cursor: var(--cursor); padding: 0; }
|
|
.tasknotes-plugin .task-subgroup-action:hover { color: var(--tn-text-normal); }
|
|
|
|
|
|
.tasknotes-plugin .task-list-view__project-link {
|
|
color: var(--tn-text-normal);
|
|
text-decoration: none;
|
|
cursor: var(--cursor);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__project-link:hover {
|
|
color: var(--tn-interactive-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__group-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* Empty State */
|
|
.tasknotes-plugin .task-list-view__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-xl);
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin: var(--tn-spacing-lg) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__empty-title {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__empty-description {
|
|
font-size: var(--tn-font-size-lg);
|
|
line-height: 1.6;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Task Item Container (wraps task cards) */
|
|
.tasknotes-plugin .task-list-view__task-item {
|
|
position: relative;
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
transition: all var(--tn-transition-fast);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border-color: var(--tn-border-color-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item:focus-within {
|
|
border-color: var(--tn-interactive-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Task Item States */
|
|
.tasknotes-plugin .task-list-view__task-item--completed {
|
|
opacity: 0.7;
|
|
background: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item--overdue {
|
|
border-left: 4px solid var(--tn-color-error);
|
|
background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item--due-today {
|
|
border-left: 4px solid var(--tn-interactive-accent);
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 0.05, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item--archived {
|
|
opacity: 0.5;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Task Item Priority Indicators */
|
|
.tasknotes-plugin .task-list-view__task-item--priority-high {
|
|
border-left: 3px solid var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item--priority-normal {
|
|
border-left: 3px solid var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__task-item--priority-low {
|
|
border-left: 3px solid var(--tn-text-muted);
|
|
}
|
|
|
|
/* Task Update Animation */
|
|
.tasknotes-plugin .task-list-view__task-item--updating {
|
|
animation: task-update 1.5s ease;
|
|
}
|
|
|
|
@keyframes task-update {
|
|
0% {
|
|
background-color: var(--tn-bg-primary);
|
|
transform: scale(1);
|
|
}
|
|
20% {
|
|
background-color: var(--tn-interactive-accent-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
background-color: var(--tn-bg-primary);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .task-list-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__add-button {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .task-list-view__group-header {
|
|
font-size: var(--tn-font-size-md);
|
|
padding: var(--tn-spacing-sm) 0 var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__empty {
|
|
padding: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__empty-title {
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-list-view__empty-description {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
}
|
|
|
|
|
|
/* ===== CALENDAR-VIEW.CSS ===== */
|
|
/* ================================================
|
|
CALENDAR VIEW & MINI-CALENDAR VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Calendar View Container - Root Block */
|
|
.tasknotes-plugin .calendar-view,
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--tn-spacing-sm);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Calendar Controls Container */
|
|
.tasknotes-plugin .calendar-view__controls,
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-sm);
|
|
gap: var(--tn-spacing-xs);
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Calendar Header */
|
|
.tasknotes-plugin .calendar-view__header,
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-sm) 0;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Use consistent button system for view selector */
|
|
.tasknotes-plugin .calendar-view__view-selector,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector {
|
|
/* margin-right: var(--tn-spacing-md); */
|
|
/* min-width: 120px; */
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: var(--tn-radius-sm);
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
cursor: var(--cursor);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__view-selector:hover,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:hover {
|
|
background: var(--tn-interactive-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__view-selector:focus,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Navigation Section */
|
|
.tasknotes-plugin .calendar-view__navigation,
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Calendar Month Display */
|
|
.tasknotes-plugin .calendar-view__month-display,
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-lg);
|
|
/* min-width: 140px; */
|
|
text-align: center;
|
|
padding-inline: 5px;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__nav-button,
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__today-button,
|
|
.tasknotes-plugin .mini-calendar-view__today-button {
|
|
margin-left: auto;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
font-weight: normal;
|
|
opacity: 0.7;
|
|
transition: opacity var(--tn-transition-fast);
|
|
cursor: var(--cursor);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__today-button:hover,
|
|
.tasknotes-plugin .mini-calendar-view__today-button:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.tasknotes-plugin .calendar-view__loading,
|
|
.tasknotes-plugin .mini-calendar-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__loading::before,
|
|
.tasknotes-plugin .mini-calendar-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Calendar Grid Container */
|
|
.tasknotes-plugin .calendar-view__grid-container,
|
|
.tasknotes-plugin .mini-calendar-view__grid-container {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Grid */
|
|
.tasknotes-plugin .calendar-view__grid,
|
|
.tasknotes-plugin .mini-calendar-view__grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
overflow: hidden;
|
|
role: grid;
|
|
}
|
|
|
|
/* Calendar Grid Header Row */
|
|
.tasknotes-plugin .calendar-view__grid-header,
|
|
.tasknotes-plugin .mini-calendar-view__grid-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
background: var(--tn-bg-secondary);
|
|
role: row;
|
|
}
|
|
|
|
/* Calendar Week Row */
|
|
.tasknotes-plugin .calendar-view__week,
|
|
.tasknotes-plugin .mini-calendar-view__week {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
role: row;
|
|
}
|
|
|
|
/* Calendar Day Header (Sun, Mon, etc.) */
|
|
.tasknotes-plugin .calendar-view__day-header,
|
|
.tasknotes-plugin .mini-calendar-view__day-header {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--tn-spacing-xs);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: none;
|
|
role: columnheader;
|
|
}
|
|
|
|
/* Calendar Day Cell - consistent styling */
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
position: relative;
|
|
min-height: 2rem;
|
|
padding: var(--tn-spacing-xs);
|
|
text-align: center;
|
|
cursor: var(--cursor);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tn-bg-primary);
|
|
border: none;
|
|
transition: all var(--tn-transition-fast);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 500;
|
|
role: gridcell;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Day - Today State */
|
|
.tasknotes-plugin .calendar-view__day--today,
|
|
.tasknotes-plugin .mini-calendar-view__day--today {
|
|
background: var(--tn-interactive-hover) !important;
|
|
color: var(--tn-interactive-accent);
|
|
font-weight: 600;
|
|
box-shadow: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--today::after,
|
|
.tasknotes-plugin .mini-calendar-view__day--today::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* Calendar Day - Selected State */
|
|
.tasknotes-plugin .calendar-view__day--selected,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected {
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
font-weight: 500;
|
|
background-color: color-mix(in srgb, var(--tn-interactive-accent) 12%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Selected but not today */
|
|
.tasknotes-plugin .calendar-view__day--selected:not(.calendar-view__day--today),
|
|
.tasknotes-plugin .mini-calendar-view__day--selected:not(.mini-calendar-view__day--today) {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
/* Selected and today */
|
|
.tasknotes-plugin .calendar-view__day--today.calendar-view__day--selected,
|
|
.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Day - Outside Month */
|
|
.tasknotes-plugin .calendar-view__day--outside-month,
|
|
.tasknotes-plugin .mini-calendar-view__day--outside-month {
|
|
color: var(--tn-text-faint);
|
|
background-color: transparent;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Selected state overrides content indicator borders */
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-notes,
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-notes,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-daily-note {
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* Day Indicators Container (for dots/markers) */
|
|
.tasknotes-plugin .calendar-view__day-indicators,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicators {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Individual Day Indicator */
|
|
.tasknotes-plugin .calendar-view__day-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--notes,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--notes {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--tasks {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--important,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--important {
|
|
background-color: var(--tn-color-warning);
|
|
}
|
|
|
|
/* Content Indicators (Notes, Tasks, Daily Notes) */
|
|
.tasknotes-plugin .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes {
|
|
bottom: 4px;
|
|
left: 30%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks {
|
|
bottom: 4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
|
|
bottom: 4px;
|
|
left: 70%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* Hover effects for content indicators */
|
|
.tasknotes-plugin .calendar-view__day:hover .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
|
|
transform: translateX(-50%) scale(1.2);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Notes Indicators - Different intensities */
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-few {
|
|
background: var(--tn-color-notes-light);
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some {
|
|
background: var(--tn-color-notes-medium);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
background: var(--tn-color-notes-heavy);
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Task Indicators - Different states */
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-due,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due {
|
|
background: var(--tn-color-error);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-completed,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed {
|
|
background: var(--tn-color-success);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-scheduled,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled {
|
|
background: var(--tn-interactive-accent);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-archived,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived {
|
|
background: var(--tn-color-archived);
|
|
width: 8px;
|
|
height: 8px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Daily Note Indicator */
|
|
.tasknotes-plugin .calendar-view__content-indicator--daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
|
|
background-color: var(--tn-color-daily-note);
|
|
width: 7px;
|
|
height: 7px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Hover tooltip for indicators */
|
|
.tasknotes-plugin .calendar-view__content-indicator:hover::after,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator:hover::after {
|
|
content: attr(aria-label);
|
|
position: absolute;
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-normal);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
white-space: nowrap;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: var(--tn-z-tooltip);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
pointer-events: none;
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Day Content State Modifiers */
|
|
.tasknotes-plugin .calendar-view__day--has-content,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content {
|
|
font-weight: 500;
|
|
background-color: transparent;
|
|
border-top: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
/* Notes Content Indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-few {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-light);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-some {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-medium);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-many {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-heavy);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
/* Tasks Content Indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-error);
|
|
background: linear-gradient(to right, var(--cs-red-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-scheduled-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-interactive-accent);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-completed-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-success);
|
|
background: linear-gradient(to right, var(--cs-green-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-archived-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-archived-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-archived);
|
|
background: linear-gradient(to right, var(--cs-gray-100), transparent);
|
|
}
|
|
|
|
/* Daily Note Content Indicator */
|
|
.tasknotes-plugin .calendar-view__day--has-daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-daily-note);
|
|
background: linear-gradient(to right, var(--cs-purple-100), transparent);
|
|
}
|
|
|
|
/* Enhanced hover effects for content indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-content:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
|
|
border-left-width: var(--tn-spacing-sm);
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
/* Mini calendar minimalist adjustments */
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
padding: 0;
|
|
gap: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
padding: 0;
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend {
|
|
margin-top: var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-summary {
|
|
cursor: var(--cursor);
|
|
list-style: none;
|
|
padding: calc(var(--tn-spacing-xs) * 0.25) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend[open] .mini-calendar-view__legend-summary {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--tn-spacing-xs) * 0.5);
|
|
margin-top: calc(var(--tn-spacing-xs) * 0.75);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(var(--tn-spacing-xs) * 0.5);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-section-title {
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--due {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--scheduled {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--completed {
|
|
background-color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--notes {
|
|
background-color: var(--tn-color-notes-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--daily {
|
|
background-color: var(--tn-color-daily-note);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-label {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-interaction {
|
|
display: flex;
|
|
gap: var(--tn-spacing-xs);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-action {
|
|
font-weight: 600;
|
|
color: var(--tn-text-muted);
|
|
min-width: 96px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-description {
|
|
color: var(--tn-text-muted);
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: var(--tn-button-height-sm);
|
|
height: var(--tn-button-height-sm);
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__nav-button:hover {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:hover,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus-visible {
|
|
outline: 1px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-md);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid-container {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
gap: 1px;
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid-header {
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day-header {
|
|
background: transparent;
|
|
color: var(--tn-text-muted);
|
|
letter-spacing: 0.08em;
|
|
padding: calc(var(--tn-spacing-xs) * 0.75) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__week {
|
|
gap: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
background: transparent;
|
|
border-radius: var(--tn-radius-sm);
|
|
min-height: 2.25rem;
|
|
border: none;
|
|
transition: border-color var(--tn-transition-fast), background-color var(--tn-transition-fast), color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day:hover {
|
|
background: color-mix(in srgb, var(--tn-interactive-hover) 25%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today {
|
|
background: none !important;
|
|
color: var(--tn-text-on-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today::after {
|
|
bottom: 6px;
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 85%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--selected {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 20%, transparent);
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 25%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--outside-month {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day-indicators {
|
|
margin-top: 4px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
bottom: 6px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
|
|
transform: translateX(-50%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .calendar-view,
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__controls,
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__nav-button,
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
min-height: 1.8rem;
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .calendar-view__header,
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__navigation,
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__month-display,
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-size: var(--tn-font-size-md);
|
|
min-width: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
min-height: 1.5rem;
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
}
|
|
|
|
/* Mini Calendar Specific Indicators */
|
|
.tasknotes-plugin .note-indicator,
|
|
.tasknotes-plugin .task-indicator,
|
|
.tasknotes-plugin .daily-note-indicator {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.few-notes {
|
|
background-color: var(--tn-color-notes-light);
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.some-notes {
|
|
background-color: var(--tn-color-notes-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.many-notes {
|
|
background-color: var(--tn-color-notes-heavy);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.due-tasks {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.completed-tasks {
|
|
background-color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.scheduled-tasks {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .daily-note-indicator {
|
|
background-color: var(--tn-color-daily-note);
|
|
}
|
|
|
|
/* Cache Loading Indicator */
|
|
.tasknotes-plugin .cache-loading-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .cache-loading-indicator::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR DRAG AND DROP STATES
|
|
================================================ */
|
|
|
|
/* Drag over state for mini calendar days */
|
|
.tasknotes-plugin .mini-calendar-view__day--dragover {
|
|
background-color: var(--tn-interactive-accent-hover) !important;
|
|
border-color: var(--tn-interactive-accent) !important;
|
|
color: var(--tn-text-on-accent) !important;
|
|
transform: scale(1.1);
|
|
box-shadow: var(--tn-shadow-light);
|
|
z-index: 10;
|
|
border: 2px solid var(--tn-interactive-accent);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR WEEK NUMBERS & SELECTION
|
|
================================================ */
|
|
|
|
/* Update grid layout to include week number column */
|
|
.tasknotes-plugin .mini-calendar-view__grid-header {
|
|
grid-template-columns: 40px repeat(7, 1fr);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__week {
|
|
grid-template-columns: 40px repeat(7, 1fr);
|
|
}
|
|
|
|
/* Week number header cell */
|
|
.tasknotes-plugin .mini-calendar-view__week-header {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--tn-spacing-xs);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: none;
|
|
}
|
|
|
|
/* Week number cell */
|
|
.tasknotes-plugin .mini-calendar-week-number {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
cursor: var(--cursor);
|
|
transition: all var(--tn-transition-fast);
|
|
border-right: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-week-number:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR NOTE PREVIEW TOOLTIP
|
|
================================================ */
|
|
|
|
.mini-calendar-note-preview {
|
|
position: absolute;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-4-3);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
max-width: 300px;
|
|
min-width: 200px;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-header {
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-list li {
|
|
padding: var(--tn-spacing-xs) 0;
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-note-title {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-note-type {
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-xs);
|
|
font-style: italic;
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-more {
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
margin-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR HEAT MAP INTENSITY
|
|
================================================ */
|
|
|
|
/* Heat map intensity levels (GitHub contributions style) */
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-none {
|
|
/* Default background, no change */
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-low {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 25%, var(--tn-bg-primary)) !important;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-medium {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 40%, var(--tn-bg-primary)) !important;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-high {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 55%, var(--tn-bg-primary)) !important;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-very-high {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 70%, var(--tn-bg-primary)) !important;
|
|
color: var(--tn-text-on-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Preserve hover effect on heat map days */
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-low:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-medium:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-high:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-very-high:hover {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 35%, var(--tn-interactive-hover)) !important;
|
|
}
|
|
|
|
|
|
/* ===== ADVANCED-CALENDAR-VIEW.CSS ===== */
|
|
/* Advanced Calendar View Styles */
|
|
.advanced-calendar-view {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ICS Event Styles */
|
|
.fc-event[data-ics-event="true"] {
|
|
opacity: 0.9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Only apply calendar emoji to ICS events in non-list views */
|
|
.fc-daygrid-event[data-ics-event="true"]:before,
|
|
.fc-timegrid-event[data-ics-event="true"]:before {
|
|
content: "📅";
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
font-size: 10px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.fc-event[data-ics-event="true"]:hover {
|
|
opacity: 1;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* ICS Event Info Modal */
|
|
.ics-event-description {
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
font-size: 0.9em;
|
|
margin-top: 0.25rem;
|
|
padding: 0.5rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ICS Context Menu */
|
|
.ics-event-context-menu {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ics-context-menu-item:hover {
|
|
background-color: var(--background-modifier-hover) !important;
|
|
}
|
|
|
|
/* Timeblock Help Text */
|
|
.advanced-calendar-view__help-text {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
border-left: 3px solid var(--color-accent);
|
|
}
|
|
|
|
/* Event Type Specific Styles */
|
|
|
|
/* Timeblock Events */
|
|
.fc-timeblock-event,
|
|
.fc-event[data-event-type="timeblock"] {
|
|
opacity: 0.65;
|
|
border-radius: 4px;
|
|
border-width: 1px !important;
|
|
border-style: solid !important;
|
|
transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.fc-timeblock-event:hover,
|
|
.fc-event[data-event-type="timeblock"]:hover {
|
|
opacity: 0.90;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-0.5px);
|
|
}
|
|
|
|
/* Time Entry Events - Recorded time with distinctive dashed border */
|
|
.fc-event[data-event-type="timeEntry"] {
|
|
opacity: 0.9;
|
|
border-radius: 4px;
|
|
border-width: 2px !important;
|
|
border-style: dashed !important; /* Dashed border to differentiate from solid timeblocks */
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
rgba(16, 185, 129, 0.08),
|
|
rgba(16, 185, 129, 0.08) 10px,
|
|
rgba(16, 185, 129, 0.15) 10px,
|
|
rgba(16, 185, 129, 0.15) 20px
|
|
) !important; /* Subtle diagonal stripes in green */
|
|
border-color: #10b981 !important; /* Green to indicate "completed/recorded" time */
|
|
}
|
|
|
|
.fc-event[data-event-type="timeEntry"] .fc-event-time,
|
|
.fc-event[data-event-type="timeEntry"] .fc-event-title {
|
|
color: #059669 !important; /* Darker green for better readability */
|
|
font-weight: 500;
|
|
}
|
|
|
|
.fc-event[data-event-type="timeEntry"]:hover {
|
|
opacity: 1;
|
|
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
|
|
border-style: solid !important; /* Solid border on hover for clarity */
|
|
}
|
|
|
|
/* Dark mode adjustments for time entries */
|
|
.theme-dark .fc-event[data-event-type="timeEntry"] {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
rgba(52, 211, 153, 0.1),
|
|
rgba(52, 211, 153, 0.1) 10px,
|
|
rgba(52, 211, 153, 0.18) 10px,
|
|
rgba(52, 211, 153, 0.18) 20px
|
|
) !important;
|
|
border-color: #34d399 !important; /* Lighter green for dark mode */
|
|
}
|
|
|
|
.theme-dark .fc-event[data-event-type="timeEntry"] .fc-event-time,
|
|
.theme-dark .fc-event[data-event-type="timeEntry"] .fc-event-title {
|
|
color: #6ee7b7 !important; /* Even lighter green for text in dark mode */
|
|
}
|
|
|
|
/* Task Events */
|
|
.fc-task-event {
|
|
border-radius: 4px;
|
|
border-width: 1px !important;
|
|
}
|
|
|
|
.fc-task-event:hover {
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* ICS Events - only in non-list views */
|
|
.fc-daygrid-event.fc-ics-event,
|
|
.fc-timegrid-event.fc-ics-event {
|
|
border-radius: 4px;
|
|
border-width: 2px !important;
|
|
border-style: solid !important;
|
|
}
|
|
|
|
.fc-daygrid-event.fc-ics-event:hover,
|
|
.fc-timegrid-event.fc-ics-event:hover {
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Recurring Events */
|
|
.fc-recurring-event {
|
|
border-style: dashed !important;
|
|
}
|
|
|
|
/* Completed Events */
|
|
.fc-completed-event {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Timeblock Modal Styles */
|
|
.timeblock-creation-modal .modal-content {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.timeblock-date-display {
|
|
margin-bottom: 1rem;
|
|
padding: 0.75rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeblock-time-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.timeblock-modal-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.timeblock-help-text {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
margin-top: 1rem;
|
|
padding: 0.75rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.timeblock-help-text code {
|
|
background: var(--background-primary);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Attachment Selection Styles */
|
|
.timeblock-attachments-list {
|
|
margin-top: 0.5rem;
|
|
min-height: 2rem;
|
|
}
|
|
|
|
.timeblock-attachments-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-size: 0.9em;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.timeblock-attachment-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.timeblock-attachment-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.timeblock-attachment-info {
|
|
flex: 1;
|
|
min-width: 0; /* Allow text truncation */
|
|
}
|
|
|
|
.timeblock-attachment-name {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
display: block;
|
|
}
|
|
|
|
.timeblock-attachment-path {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
margin-top: 0.2rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.timeblock-attachment-remove {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 1.2em;
|
|
cursor: var(--cursor);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 3px;
|
|
margin-left: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timeblock-attachment-remove:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Attachment Suggestion Modal Styles */
|
|
.attachment-suggestion {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.attachment-name {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.attachment-path {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
/* Timeblock Info Modal */
|
|
.timeblock-description {
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
font-size: 0.9em;
|
|
margin-top: 0.25rem;
|
|
padding: 0.5rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.timeblock-attachments {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.timeblock-attachment-item {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.timeblock-attachment-item .internal-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.timeblock-attachment-item .internal-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ICS Subscription Settings */
|
|
.ics-subscription-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.settings-status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-status-indicator.enabled {
|
|
background-color: var(--text-success);
|
|
}
|
|
|
|
.settings-status-indicator.enabled.error {
|
|
background-color: var(--text-error);
|
|
}
|
|
|
|
.settings-status-indicator.disabled {
|
|
background-color: var(--text-muted);
|
|
}
|
|
|
|
.ics-subscription-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ics-subscription-name {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ics-subscription-url {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ics-subscription-meta {
|
|
font-size: 0.8em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ics-subscription-error {
|
|
font-size: 0.8em;
|
|
color: var(--text-error);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.ics-subscription-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ics-subscription-actions button {
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.ics-subscription-actions button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.ics-subscription-toggle.enabled {
|
|
color: var(--text-success);
|
|
border-color: var(--text-success);
|
|
}
|
|
|
|
.ics-subscription-toggle.disabled {
|
|
color: var(--text-muted);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.ics-subscription-delete {
|
|
color: var(--text-error) !important;
|
|
border-color: var(--text-error) !important;
|
|
}
|
|
|
|
.ics-subscription-delete:hover {
|
|
background: var(--text-error) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* ICS Subscription Forms */
|
|
.ics-add-subscription-form,
|
|
.ics-edit-form {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.ics-form-row,
|
|
.ics-edit-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ics-form-row-multi,
|
|
.ics-edit-settings {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.ics-form-group,
|
|
.ics-edit-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.ics-form-label,
|
|
.ics-edit-label {
|
|
min-width: 80px;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ics-form-input,
|
|
.ics-edit-input {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.ics-form-color,
|
|
.ics-edit-color {
|
|
width: 40px;
|
|
height: 30px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.ics-form-number,
|
|
.ics-edit-number {
|
|
width: 80px;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.ics-form-checkbox-label,
|
|
.ics-edit-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.ics-form-checkbox,
|
|
.ics-edit-checkbox {
|
|
margin: 0;
|
|
}
|
|
|
|
.ics-form-button,
|
|
.ics-edit-button {
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.ics-form-button:hover,
|
|
.ics-edit-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.ics-form-button.mod-cta,
|
|
.ics-edit-button.mod-cta {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ics-form-button.mod-cta:hover,
|
|
.ics-edit-button.mod-cta:hover {
|
|
background: var(--interactive-accent-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ics-edit-buttons {
|
|
justify-content: flex-start;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.ics-subscription-editing {
|
|
background: var(--background-secondary);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.advanced-calendar-view__container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.advanced-calendar-view__header {
|
|
padding: 0.5rem 1rem;
|
|
background: var(--background-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.advanced-calendar-view__main-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.advanced-calendar-view__main-row .filter-bar-container {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.advanced-calendar-view__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.advanced-calendar-view__schedule-tasks-btn {
|
|
padding: 0.4rem 0.8rem;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: var(--cursor);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.advanced-calendar-view__schedule-tasks-btn:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.advanced-calendar-view__calendar-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--tn-radius-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* FullCalendar overrides - Minimalist & Clean */
|
|
.advanced-calendar-view .fc {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
/* Ensure calendar table expands to fill container width */
|
|
.advanced-calendar-view .fc-view-harness {
|
|
width: 100%;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-scrollgrid {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-scrollgrid-sync-table {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Remove outer borders only */
|
|
.advanced-calendar-view .fc-theme-standard .fc-scrollgrid {
|
|
border: none;
|
|
}
|
|
|
|
/* Light dividers for clean look */
|
|
.advanced-calendar-view .fc-col-header-cell {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-daygrid-day {
|
|
border-right: 1px solid var(--background-modifier-border-hover);
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-slot {
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-col {
|
|
border-right: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Header toolbar styling */
|
|
.advanced-calendar-view .fc-header-toolbar {
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: transparent;
|
|
}
|
|
|
|
/* Calendar title styling - smaller and minimalist */
|
|
.advanced-calendar-view .fc-toolbar-title {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-toolbar-chunk {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-toolbar.fc-header-toolbar {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Remove all borders from FullCalendar buttons */
|
|
.advanced-calendar-view .fc-button,
|
|
.advanced-calendar-view .fc-button-primary,
|
|
.advanced-calendar-view .fc-button-secondary,
|
|
.advanced-calendar-view .fc-prev-button,
|
|
.advanced-calendar-view .fc-next-button,
|
|
.advanced-calendar-view .fc-today-button,
|
|
.advanced-calendar-view .fc-dayGridMonth-button,
|
|
.advanced-calendar-view .fc-timeGridWeek-button,
|
|
.advanced-calendar-view .fc-timeGridDay-button,
|
|
.advanced-calendar-view .fc-listWeek-button {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
font-weight: 400;
|
|
padding: 0.3rem 0.6rem;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Hover states for all FC buttons */
|
|
.advanced-calendar-view .fc-button:hover:not(:disabled),
|
|
.advanced-calendar-view .fc-button-primary:hover:not(:disabled),
|
|
.advanced-calendar-view .fc-button-secondary:hover:not(:disabled),
|
|
.advanced-calendar-view .fc-prev-button:hover:not(:disabled),
|
|
.advanced-calendar-view .fc-next-button:hover:not(:disabled) {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--text-normal);
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-button-primary:disabled {
|
|
background: transparent;
|
|
color: var(--text-faint);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Active state for FC buttons (currently selected view) */
|
|
.advanced-calendar-view .fc-button-active,
|
|
.advanced-calendar-view .fc-button.fc-button-active {
|
|
background: var(--interactive-accent) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
/* Use consistent button system for today button */
|
|
.advanced-calendar-view .fc-today-button {
|
|
background: var(--interactive-accent);
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-today-button:hover:not(:disabled) {
|
|
background: var(--interactive-accent-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Clean today styling */
|
|
.advanced-calendar-view .fc-daygrid-day.fc-day-today {
|
|
background: color-mix(in srgb, var(--interactive-accent) 8%, var(--background-primary)) !important;
|
|
border: 2px solid var(--interactive-accent);
|
|
position: relative;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
|
|
font-weight: 600;
|
|
color: var(--interactive-accent) !important;
|
|
}
|
|
|
|
/* Fix today styling specifically for multi-month (year) view */
|
|
.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day.fc-day-today {
|
|
background: color-mix(in srgb, var(--interactive-accent) 8%, var(--background-primary)) !important;
|
|
border: 2px solid var(--interactive-accent) !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
|
|
font-weight: 600;
|
|
color: var(--interactive-accent) !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-daygrid-day.fc-day-today::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--interactive-accent);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Header cells */
|
|
.advanced-calendar-view .fc-col-header-cell {
|
|
background: var(--background-primary) !important;
|
|
color: var(--text-muted) !important;
|
|
font-weight: 400;
|
|
font-size: 0.75rem;
|
|
/* text-transform: lowercase; */
|
|
letter-spacing: 0;
|
|
padding: 0.5rem 0.5rem;
|
|
}
|
|
|
|
/* Day cells - ensure proper theme colors */
|
|
.advanced-calendar-view .fc-daygrid-day {
|
|
background: var(--background-primary) !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Multi-month (year view) styling - minimalist */
|
|
.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day {
|
|
background: var(--background-primary) !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Multi-month month headers */
|
|
.advanced-calendar-view .fc-multimonth-header {
|
|
background: transparent !important;
|
|
color: var(--text-normal) !important;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-multimonth-title {
|
|
background: transparent !important;
|
|
color: var(--text-normal) !important;
|
|
font-weight: 500;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Multi-month day headers (Mon, Tue, etc.) */
|
|
.advanced-calendar-view .fc-multimonth .fc-col-header-cell {
|
|
background: transparent !important;
|
|
color: var(--text-muted) !important;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Day numbers */
|
|
.advanced-calendar-view .fc-daygrid-day-number {
|
|
color: var(--text-normal) !important;
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* List view day headers - minimalist */
|
|
.advanced-calendar-view .fc-list-day-cushion {
|
|
background: transparent !important;
|
|
color: var(--text-normal) !important;
|
|
font-weight: 500;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-list-day {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-list-table th {
|
|
background: var(--background-secondary-alt) !important;
|
|
}
|
|
|
|
/* Clean event styling */
|
|
.advanced-calendar-view .fc-event {
|
|
border-radius: 6px;
|
|
border: 1px solid;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
padding: 0.2rem 0.5rem;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.2s ease;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-event:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.advanced-calendar-view .fc-event-title {
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
/* Time grid specific styles */
|
|
.advanced-calendar-view .fc-timegrid-slot {
|
|
height: 3rem;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-slot-label {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-axis {
|
|
width: 4rem;
|
|
}
|
|
|
|
|
|
/* More events link */
|
|
.advanced-calendar-view .fc-more-link {
|
|
color: var(--interactive-accent);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-more-link:hover {
|
|
color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
/* Current time indicator (red line) */
|
|
.advanced-calendar-view .fc-timegrid-now-indicator-line {
|
|
border-color: #ff0000;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-now-indicator-arrow {
|
|
border-color: #ff0000;
|
|
}
|
|
|
|
/* Mobile collapse toggle - hidden by default */
|
|
.advanced-calendar-view__mobile-toggle {
|
|
display: none;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.advanced-calendar-view__collapse-btn {
|
|
background: var(--interactive-normal);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.85rem;
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.advanced-calendar-view__collapse-btn:hover {
|
|
background: var(--interactive-hover);
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 1200px) {
|
|
.advanced-calendar-view__main-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.advanced-calendar-view__main-row .filter-bar-container {
|
|
min-width: unset;
|
|
}
|
|
|
|
.advanced-calendar-view__controls {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Show mobile toggle on small screens */
|
|
.advanced-calendar-view__mobile-toggle {
|
|
display: block;
|
|
}
|
|
|
|
/* Hide main row by default on mobile when collapsed */
|
|
.advanced-calendar-view__main-row.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.advanced-calendar-view__main-row.expanded {
|
|
display: flex;
|
|
}
|
|
|
|
.advanced-calendar-view__controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
|
|
.advanced-calendar-view__schedule-tasks-btn {
|
|
align-self: center;
|
|
}
|
|
|
|
.advanced-calendar-view__calendar-container {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Reduce header padding on mobile */
|
|
.advanced-calendar-view__header {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Today highlighting disabled */
|
|
.hide-today-highlight .fc-unthemed td.fc-today {
|
|
background: inherit;
|
|
}
|
|
|
|
.hide-today-highlight .fc-daygrid-day.fc-day-today {
|
|
background: inherit !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.hide-today-highlight .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
|
|
font-weight: 400;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.hide-today-highlight .fc-daygrid-day.fc-day-today::before {
|
|
display: none;
|
|
}
|
|
|
|
.hide-today-highlight .fc-timegrid-col.fc-day-today {
|
|
background: inherit !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* ICS Refresh Button - Match exact styling of other FullCalendar buttons */
|
|
.advanced-calendar-view .fc-refreshICS-button {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: var(--text-muted) !important;
|
|
font-size: 0.8rem !important;
|
|
font-weight: 400 !important;
|
|
padding: 0.3rem 0.6rem !important;
|
|
border-radius: 4px !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-refreshICS-button .fc-icon,
|
|
.advanced-calendar-view .fc-refreshICS-button .fc-button-label {
|
|
color: var(--text-muted) !important;
|
|
font-size: 0.8rem !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.2;
|
|
display: inline;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Hover state - match other buttons exactly */
|
|
.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) {
|
|
background: var(--tn-interactive-hover) !important;
|
|
color: var(--text-normal) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) .fc-icon,
|
|
.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) .fc-button-label {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Active/Focus state - match other buttons */
|
|
.advanced-calendar-view .fc-refreshICS-button:active,
|
|
.advanced-calendar-view .fc-refreshICS-button:focus {
|
|
background: var(--tn-interactive-hover) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Disabled state - match other buttons */
|
|
.advanced-calendar-view .fc-refreshICS-button:disabled {
|
|
background: transparent !important;
|
|
color: var(--text-faint) !important;
|
|
opacity: 0.5 !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ===== CLEAN LIST VIEW STYLING - NO INHERITANCE ===== */
|
|
|
|
/* Base styling for ALL list events - completely independent from calendar views */
|
|
.fc-list-event {
|
|
/* Reset any inherited styling from calendar views */
|
|
opacity: 1 !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Consistent light hover background for ALL list events */
|
|
.fc-list-event:hover {
|
|
background-color: var(--background-modifier-hover) !important;
|
|
}
|
|
|
|
/* Fix time element color on hover in list view */
|
|
.fc-list-event:hover .fc-list-event-time {
|
|
color: inherit !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.fc-list-event .fc-list-event-time {
|
|
/* Consistent time styling for all events */
|
|
font-size: inherit !important;
|
|
color: inherit !important;
|
|
font-weight: inherit !important;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.fc-list-event .fc-list-event-title {
|
|
/* Base title styling - clean and consistent */
|
|
padding: 8px 12px;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
font-size: inherit !important;
|
|
font-weight: inherit !important;
|
|
color: inherit !important;
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
.fc-list-event .fc-list-event-dot {
|
|
/* Standard dot styling for all events */
|
|
border: inherit !important;
|
|
background: inherit !important;
|
|
}
|
|
|
|
/* ===== TASK-SPECIFIC ENHANCEMENTS ===== */
|
|
|
|
/* Task events get ONLY functional enhancements - NO visual styling differences */
|
|
.fc-list-event.fc-list-task-card .fc-list-event-title {
|
|
/* Keep base styling identical to ICS events - no background, borders, or shadows */
|
|
background-color: transparent !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Remove task-specific hover - now handled by base .fc-list-event:hover */
|
|
|
|
/* Hide default FullCalendar dot for tasks since we have custom indicators */
|
|
.fc-list-event.fc-list-task-card .fc-list-event-dot {
|
|
display: none;
|
|
}
|
|
|
|
/* Style the status dot in graphic column */
|
|
.fc-list-event-status-dot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Prevent graphic column from getting hover background */
|
|
.fc-list-event:hover .fc-list-event-graphic {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Task title row with indicators on same line */
|
|
.fc-list-task-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Metadata spacing without separators */
|
|
.fc-list-task-metadata > span {
|
|
display: block;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* Status and priority dots */
|
|
.fc-list-task-status-dot,
|
|
.fc-list-task-priority-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
border: 2px solid currentColor;
|
|
background-color: transparent;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.fc-list-task-priority-dot {
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.fc-list-task-priority-dot {
|
|
background-color: var(--priority-color, currentColor);
|
|
}
|
|
|
|
/* Recurring indicator styling */
|
|
.fc-list-task-recurring-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.fc-list-task-recurring-indicator:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fc-list-task-status-dot {
|
|
border-color: var(--current-status-color, var(--text-muted));
|
|
}
|
|
|
|
/* Recurring indicator */
|
|
.fc-list-task-recurring-indicator {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Task title */
|
|
.fc-list-task-title {
|
|
font-weight: 500 !important;
|
|
color: var(--text-normal) !important;
|
|
font-size: 14px !important;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Task metadata */
|
|
.fc-list-task-metadata {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.fc-list-task-metadata > span {
|
|
background-color: var(--background-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.fc-list-task-projects {
|
|
background-color: rgba(var(--color-blue-rgb, 13 110 253), 0.1) !important;
|
|
color: var(--color-blue) !important;
|
|
}
|
|
|
|
.fc-list-task-contexts {
|
|
background-color: rgba(var(--color-green-rgb, 25 135 84), 0.1) !important;
|
|
color: var(--color-green) !important;
|
|
}
|
|
|
|
.fc-list-task-tags {
|
|
background-color: rgba(var(--color-purple-rgb, 102 16 242), 0.1) !important;
|
|
color: var(--color-purple) !important;
|
|
}
|
|
|
|
.fc-list-task-time-estimate {
|
|
background-color: rgba(var(--color-orange-rgb, 255 159 67), 0.1) !important;
|
|
color: var(--color-orange) !important;
|
|
}
|
|
|
|
.fc-list-task-metadata-separator {
|
|
color: var(--text-faint);
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* Responsive design for smaller screens */
|
|
@media (max-width: 768px) {
|
|
.fc-list-task-metadata {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.fc-list-task-title-row {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* Animation for newly added events */
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fc-list-event.fc-list-task-card[data-newly-added] {
|
|
animation: slideInUp 0.3s ease-out;
|
|
}
|
|
|
|
/* Dark mode fixes for FullCalendar popover ("+more" popup) */
|
|
.theme-dark .advanced-calendar-view .fc-popover {
|
|
background: var(--background-primary) !important;
|
|
border: 1px solid var(--background-modifier-border) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-popover-header {
|
|
background: var(--background-secondary) !important;
|
|
border-bottom: 1px solid var(--background-modifier-border) !important;
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-popover-title {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-popover-close {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-popover-close:hover {
|
|
color: var(--text-normal) !important;
|
|
background: var(--background-modifier-hover) !important;
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-popover-body {
|
|
background: var(--background-primary) !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Dark mode fixes for timeGrid more link (eventMaxStack) */
|
|
.advanced-calendar-view .fc-timegrid-more-link {
|
|
color: var(--text-normal);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.advanced-calendar-view .fc-timegrid-more-link:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-timegrid-more-link {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.theme-dark .advanced-calendar-view .fc-timegrid-more-link:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
/* ===== KANBAN-VIEW.CSS ===== */
|
|
/* ================================================
|
|
KANBAN VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Kanban View Container - Root Block */
|
|
.tasknotes-plugin .kanban-view {
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
gap: var(--tn-spacing-sm);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Kanban Header */
|
|
.tasknotes-plugin .kanban-view__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__filter-container {
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--tn-spacing-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__actions-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__actions-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Use consistent button system with primary accent background preserved */
|
|
.tasknotes-plugin .kanban-view__new-task-button {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__new-task-button:hover {
|
|
background: var(--tn-interactive-accent-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__new-task-button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Stats Container */
|
|
.tasknotes-plugin .kanban-view__stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__stats-simple {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Board Container */
|
|
.tasknotes-plugin .kanban-view__board-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Board */
|
|
.tasknotes-plugin .kanban-view__board {
|
|
display: flex;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-md);
|
|
min-height: 0;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* Board Scrollbar */
|
|
.tasknotes-plugin .kanban-view__board::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-track {
|
|
background: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-thumb {
|
|
background: var(--tn-border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-thumb:hover {
|
|
background: var(--tn-text-muted);
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.tasknotes-plugin .kanban-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Error State */
|
|
.tasknotes-plugin .kanban-view__error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-color-error);
|
|
background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-secondary));
|
|
border: 1px solid color-mix(in srgb, var(--tn-color-error) 0.3, transparent);
|
|
border-radius: var(--tn-radius-md);
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
margin: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* ================================================
|
|
KANBAN COLUMNS
|
|
================================================ */
|
|
|
|
/* Column */
|
|
.tasknotes-plugin .kanban-view__column {
|
|
min-width: 200px;
|
|
max-width: 500px;
|
|
flex-shrink: 0;
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
max-height: calc(100vh - 200px);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--dragover {
|
|
border-color: var(--tn-interactive-accent);
|
|
transform: scale(1.02);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
/* Column header dragover state (for column reordering) */
|
|
.tasknotes-plugin .kanban-view__column-header--dragover {
|
|
background: var(--tn-interactive-hover);
|
|
border: 2px solid var(--tn-interactive-accent);
|
|
transform: scale(1.02);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--uncategorized {
|
|
opacity: 0.8;
|
|
border: 1px dashed var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--uncategorized .kanban-view__column-header {
|
|
background: var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--column-drop-target {
|
|
background: var(--tn-interactive-hover);
|
|
border: 2px dashed var(--tn-interactive-accent);
|
|
transform: scale(1.02);
|
|
transition: all var(--tn-transition-medium);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--column-drop-target .kanban-view__column-header {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--column-drop-target::before {
|
|
content: "Drop here to reorder column";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--tn-text-on-accent);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-md);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Column Header */
|
|
.tasknotes-plugin .kanban-view__column-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-md) var(--tn-radius-md) 0 0;
|
|
cursor: grab;
|
|
user-select: none;
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-header:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-header--dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(2deg);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
/* Drag Handle */
|
|
.tasknotes-plugin .kanban-view__drag-handle {
|
|
color: var(--tn-text-muted);
|
|
cursor: grab;
|
|
font-size: var(--tn-font-size-sm);
|
|
opacity: 0.5;
|
|
transition: opacity var(--tn-transition-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-header:hover .kanban-view__drag-handle,
|
|
.tasknotes-plugin .kanban-view__column-header-cell:hover .kanban-view__drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-title {
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-normal);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-count {
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-xs);
|
|
line-height: 1.2;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Column Body */
|
|
.tasknotes-plugin .kanban-view__column-body {
|
|
padding: var(--tn-spacing-sm);
|
|
min-height: 100px;
|
|
max-height: calc(100vh - 300px);
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body--dragover {
|
|
background: var(--tn-interactive-hover);
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body--dragover::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 0.1, transparent);
|
|
border: 2px dashed var(--tn-interactive-accent);
|
|
border-radius: var(--tn-radius-md);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Column Body Scrollbar */
|
|
.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-track {
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-thumb {
|
|
background: var(--tn-border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-thumb:hover {
|
|
background: var(--tn-text-muted);
|
|
}
|
|
|
|
/* Empty Column */
|
|
.tasknotes-plugin .kanban-view__column-empty {
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
border: 2px dashed var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
background: var(--tn-bg-secondary);
|
|
transition: all var(--tn-transition-fast);
|
|
margin: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-empty:hover {
|
|
border-color: var(--tn-interactive-accent);
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column--dragover .kanban-view__column-empty {
|
|
border-color: var(--tn-interactive-accent);
|
|
background: var(--tn-interactive-accent-hover);
|
|
color: var(--tn-text-on-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
KANBAN TASK CARDS
|
|
================================================ */
|
|
|
|
/* Cards container (used for non-virtualized columns) */
|
|
.tasknotes-plugin .kanban-view__cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
overflow-y: auto; /* Allow vertical scrolling */
|
|
flex: 1; /* Fill available space in column */
|
|
min-height: 0; /* Allow container to shrink and enable scrolling */
|
|
}
|
|
|
|
/* Dragging state for card wrappers */
|
|
.tasknotes-plugin .kanban-view__card-wrapper[draggable="true"]:hover {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__card-wrapper[draggable="true"]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE DESIGN
|
|
================================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .kanban-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__header {
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__actions-left,
|
|
.tasknotes-plugin .kanban-view__actions-right {
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__new-task-button {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__board {
|
|
padding: var(--tn-spacing-sm);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .kanban-view {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__board {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-header {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__column-body {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .kanban-view__new-task-button {
|
|
font-size: var(--tn-font-size-xs);
|
|
padding: 0 var(--tn-spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ===== AGENDA-VIEW.CSS ===== */
|
|
/* ================================================
|
|
AGENDA VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Agenda View Container - Root Block */
|
|
.tasknotes-plugin .agenda-view {
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--tn-spacing-sm);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Agenda View Controls */
|
|
.tasknotes-plugin .agenda-view__controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Header Section */
|
|
.tasknotes-plugin .agenda-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-lg) var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
position: relative;
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__title-section {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__actions-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__period-title {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-button {
|
|
border-radius: 50%;
|
|
font-size: 1.25rem;
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Filter Bar Container */
|
|
.tasknotes-plugin .agenda-view__filter-container {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Settings Section */
|
|
.tasknotes-plugin .agenda-view__settings {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
gap: var(--tn-spacing-md);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Period Selector */
|
|
.tasknotes-plugin .agenda-view__period-select {
|
|
appearance: none;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-xl) var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-primary);
|
|
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(--tn-spacing-sm) center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
color: var(--tn-text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: 400;
|
|
min-width: 120px;
|
|
min-height: var(--tn-input-height-md);
|
|
cursor: var(--cursor);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__period-select:hover {
|
|
border-color: var(--tn-border-color-hover);
|
|
background-color: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__period-select:focus {
|
|
outline: none;
|
|
border-color: var(--tn-interactive-accent);
|
|
background-color: color-mix(in srgb, var(--tn-interactive-accent) 0.1, var(--tn-bg-primary));
|
|
}
|
|
|
|
/* Today Button */
|
|
.tasknotes-plugin .agenda-view__today-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border: none;
|
|
border-radius: var(--tn-radius-md);
|
|
background: transparent;
|
|
color: var(--tn-text-muted);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1.25;
|
|
height: var(--tn-button-height-md);
|
|
cursor: var(--cursor);
|
|
user-select: none;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: all var(--tn-transition-fast);
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__today-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__today-button:focus-visible {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__today-button:active {
|
|
background: var(--tn-interactive-active);
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Toggle Controls */
|
|
.tasknotes-plugin .agenda-view__toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
cursor: var(--cursor);
|
|
user-select: none;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
padding: var(--tn-spacing-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
transition: background-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__toggle:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
|
|
/* Content Area */
|
|
.tasknotes-plugin .agenda-view__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.tasknotes-plugin .agenda-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Day Section */
|
|
.tasknotes-plugin .agenda-view__day {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-md) 0 var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
position: relative;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
/* Day section container (like task groups) */
|
|
.tasknotes-plugin .agenda-view__day-section {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Day items container */
|
|
.tasknotes-plugin .agenda-view__day-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* Collapsed state */
|
|
.tasknotes-plugin .agenda-view__day-section.is-collapsed .agenda-view__day-items {
|
|
display: none;
|
|
}
|
|
|
|
/* Chevron/toggle styles for agenda day headers (consistent with TaskList view) */
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle {
|
|
display: contents;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: var(--tn-spacing-xs);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle svg,
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron,
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron path {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle svg,
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron path {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron {
|
|
transition: transform var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-section .task-group-toggle .chevron,
|
|
.tasknotes-plugin .agenda-view__day-section .task-group-toggle svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-section.is-collapsed .task-group-toggle svg,
|
|
.tasknotes-plugin .agenda-view__day-section.is-collapsed .task-group-toggle .chevron {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-name {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-name--today {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--tn-bg-primary);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-md);
|
|
border-radius: var(--tn-radius-md);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
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(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-date {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__item-count {
|
|
background: none;
|
|
color: var(--text-muted);
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1.2;
|
|
display: inline-flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Day Content */
|
|
.tasknotes-plugin .agenda-view__day-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-content--flat {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
|
|
/* Empty States */
|
|
.tasknotes-plugin .agenda-view__empty {
|
|
padding: var(--tn-spacing-xl) var(--tn-spacing-lg);
|
|
text-align: center;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin: var(--tn-spacing-lg) 0;
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__empty-title {
|
|
margin: 0 0 var(--tn-spacing-md) 0;
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__empty-description {
|
|
margin: 0 0 var(--tn-spacing-md) 0;
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__empty-description:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__empty-tip {
|
|
font-style: italic;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__empty-tip span {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Error States */
|
|
.tasknotes-plugin .agenda-view__error {
|
|
padding: var(--tn-spacing-lg);
|
|
text-align: center;
|
|
color: var(--tn-color-error);
|
|
background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-secondary));
|
|
border: 1px solid color-mix(in srgb, var(--tn-color-error) 0.3, transparent);
|
|
border-radius: var(--tn-radius-md);
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1.5;
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .agenda-view .tasks-container {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* Note Date Display in Flat List */
|
|
.tasknotes-plugin .agenda-view__note-date {
|
|
display: inline-block;
|
|
margin-left: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .agenda-view {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__header-content {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__title-section {
|
|
order: -1;
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__period-title {
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-section,
|
|
.tasknotes-plugin .agenda-view__actions-section {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-button {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings-left,
|
|
.tasknotes-plugin .agenda-view__settings-right {
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings-right {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__day-header-text {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__item-count {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .agenda-view__header-content {
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__period-title {
|
|
font-size: var(--tn-font-size-md);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__nav-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__settings-left,
|
|
.tasknotes-plugin .agenda-view__settings-right {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tasknotes-plugin .agenda-view__toggle {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* ===== POMODORO-VIEW.CSS ===== */
|
|
/* ================================================
|
|
POMODORO VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Pomodoro View Container - Root Block */
|
|
.tasknotes-plugin .pomodoro-view {
|
|
padding: var(--tn-spacing-xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--tn-spacing-xl);
|
|
max-width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tn-bg-primary);
|
|
min-height: 100vh;
|
|
|
|
button {
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
}
|
|
|
|
/* ================================================
|
|
TIMER SECTION - Main Timer Display
|
|
================================================ */
|
|
|
|
/* Timer Section Container */
|
|
.tasknotes-plugin .pomodoro-view__timer-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-lg) 0;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Progress Circle Container */
|
|
.tasknotes-plugin .pomodoro-view__progress-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 300px;
|
|
height: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Progress SVG */
|
|
.tasknotes-plugin .pomodoro-view__progress-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Progress Circle Elements */
|
|
.tasknotes-plugin .pomodoro-view__progress-circle {
|
|
transition: stroke-dashoffset 0.5s ease;
|
|
stroke: var(--tn-interactive-accent);
|
|
stroke-width: 6;
|
|
fill: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-circle--work {
|
|
stroke: var(--tn-status-in-progress-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-circle--short-break {
|
|
stroke: var(--tn-priority-medium-color, var(--tn-color-success));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-circle--long-break {
|
|
stroke: var(--tn-priority-high-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-circle--warning {
|
|
stroke: var(--tn-color-error) !important;
|
|
animation: tn-progress-pulse 1s infinite;
|
|
}
|
|
|
|
@keyframes tn-progress-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
/* Timer Display Overlay */
|
|
.tasknotes-plugin .pomodoro-view__timer-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Timer Display */
|
|
.tasknotes-plugin .pomodoro-view__timer-display {
|
|
font-size: 3.5rem;
|
|
color: var(--tn-text-normal);
|
|
text-align: center;
|
|
font-family: var(--tn-font-mono);
|
|
letter-spacing: 0.05em;
|
|
transition: color var(--tn-transition-fast);
|
|
font-weight: var(--tn-font-weight-bold);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__timer-display--warning {
|
|
color: var(--tn-color-error);
|
|
animation: tn-timer-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes tn-timer-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Status Display */
|
|
.tasknotes-plugin .pomodoro-view__status {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
text-transform: capitalize;
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
order: -1;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__status--work {
|
|
color: var(--tn-status-in-progress-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__status--short-break {
|
|
color: var(--tn-priority-medium-color, var(--tn-color-success));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__status--long-break {
|
|
color: var(--tn-priority-high-color, var(--tn-interactive-accent));
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__status--paused {
|
|
color: var(--tn-color-warning);
|
|
}
|
|
|
|
/* ================================================
|
|
TASK DISPLAY SECTION
|
|
================================================ */
|
|
|
|
/* Task Display Container */
|
|
.tasknotes-plugin .pomodoro-view__task-display {
|
|
min-height: 40px;
|
|
min-width: 200px;
|
|
width: auto;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-sm);
|
|
background: transparent;
|
|
border-radius: var(--tn-radius-sm);
|
|
border: none;
|
|
overflow: hidden;
|
|
max-height: 100px;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition: all var(--tn-transition-medium);
|
|
}
|
|
|
|
/* Hide task display when empty with slide animation */
|
|
.tasknotes-plugin .pomodoro-view__task-display:empty {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
margin: 0 auto;
|
|
padding: 0 var(--tn-spacing-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-display--no-task {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
margin: 0 auto;
|
|
padding: 0 var(--tn-spacing-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Current Task Content */
|
|
.tasknotes-plugin .pomodoro-view__current-task {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-title {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
max-width: 400px;
|
|
word-wrap: break-word;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ================================================
|
|
TASK SELECTOR SECTION
|
|
================================================ */
|
|
|
|
/* Task Selector Container */
|
|
.tasknotes-plugin .pomodoro-view__task-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Task Buttons Container */
|
|
.tasknotes-plugin .pomodoro-view__task-buttons {
|
|
display: flex;
|
|
gap: var(--tn-spacing-sm);
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Use consistent button system for task select button */
|
|
.tasknotes-plugin .pomodoro-view__task-select-button {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-select-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-select-button--no-task {
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Use consistent button system for task clear button */
|
|
.tasknotes-plugin .pomodoro-view__task-clear-button {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-clear-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-clear-button--hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Task Card Container */
|
|
.tasknotes-plugin .pomodoro-view__task-card-container {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-card-container--empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Task card styling within pomodoro view */
|
|
.tasknotes-plugin .pomodoro-view__task-card-container .task-card {
|
|
margin: 0;
|
|
border-radius: var(--tn-radius-lg);
|
|
box-shadow: none;
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__task-card-container .task-card:hover {
|
|
/* No hover effects - keep task card static */
|
|
}
|
|
|
|
|
|
/* ================================================
|
|
CONTROL SECTION - Main Controls Container
|
|
================================================ */
|
|
|
|
/* Control Section Container */
|
|
.tasknotes-plugin .pomodoro-view__control-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md);
|
|
border: none;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Primary Controls Container */
|
|
.tasknotes-plugin .pomodoro-view__primary-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-sm) 0;
|
|
min-height: var(--tn-button-height-lg);
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Primary Control Buttons */
|
|
/* Use consistent button system with primary accent background preserved */
|
|
.tasknotes-plugin .pomodoro-view__start-button {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: none;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__start-button:hover {
|
|
background: var(--tn-interactive-accent-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Remove all borders and shadows from other pomodoro buttons */
|
|
.tasknotes-plugin .pomodoro-view__pause-button,
|
|
.tasknotes-plugin .pomodoro-view__stop-button,
|
|
.tasknotes-plugin .pomodoro-view__skip-break-button,
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__pause-button:hover,
|
|
.tasknotes-plugin .pomodoro-view__stop-button:hover,
|
|
.tasknotes-plugin .pomodoro-view__skip-break-button:hover,
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__pause-button {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stop-button {
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* Skip Break Button */
|
|
.tasknotes-plugin .pomodoro-view__skip-break-button {
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* Time Adjustment Controls */
|
|
.tasknotes-plugin .pomodoro-view__time-controls {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: var(--tn-spacing-sm);
|
|
pointer-events: auto; /* Re-enable pointer events for the buttons */
|
|
}
|
|
|
|
/* Use consistent button system for time adjust buttons */
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Button States */
|
|
.tasknotes-plugin .pomodoro-view__start-button--loading {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__start-button--hidden,
|
|
.tasknotes-plugin .pomodoro-view__pause-button--hidden,
|
|
.tasknotes-plugin .pomodoro-view__stop-button--hidden,
|
|
.tasknotes-plugin .pomodoro-view__skip-break-button--hidden,
|
|
.tasknotes-plugin .pomodoro-view__time-adjust-button--hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* ================================================
|
|
STATISTICS SECTION
|
|
================================================ */
|
|
|
|
/* Statistics Section Container */
|
|
.tasknotes-plugin .pomodoro-view__stats-section {
|
|
border: none;
|
|
padding: var(--tn-spacing-md) 0;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Statistics Grid */
|
|
.tasknotes-plugin .pomodoro-view__stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Individual Stat */
|
|
.tasknotes-plugin .pomodoro-view__stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stat--clickable {
|
|
cursor: var(--cursor);
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stat--clickable:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stat-value {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-interactive-accent);
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stat-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE DESIGN
|
|
================================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .pomodoro-view {
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-container {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__timer-display {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__control-section {
|
|
gap: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__primary-controls {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__start-button,
|
|
.tasknotes-plugin .pomodoro-view__pause-button,
|
|
.tasknotes-plugin .pomodoro-view__stop-button {
|
|
width: 100%;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__stats {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .pomodoro-view__progress-container {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__timer-display {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
ACCESSIBILITY & REDUCED MOTION
|
|
================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .pomodoro-view__progress-circle,
|
|
.tasknotes-plugin .pomodoro-view__timer-display,
|
|
.tasknotes-plugin .pomodoro-view__task-display {
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view__progress-circle--warning,
|
|
.tasknotes-plugin .pomodoro-view__timer-display--warning {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Focus indicators for keyboard navigation */
|
|
.tasknotes-plugin .pomodoro-view__start-button:focus,
|
|
.tasknotes-plugin .pomodoro-view__pause-button:focus,
|
|
.tasknotes-plugin .pomodoro-view__stop-button:focus,
|
|
.tasknotes-plugin .pomodoro-view__skip-break-button:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Time adjust buttons have their own focus styling above */
|
|
|
|
/* ================================================
|
|
RESPONSIVE DESIGN - Mobile & Narrow Panes
|
|
================================================ */
|
|
|
|
/* Extra responsive breakpoints for very granular control */
|
|
.tasknotes-plugin .pomodoro-view--tiny {
|
|
padding: var(--tn-spacing-sm);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--tiny .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 2rem !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--extra-narrow {
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--extra-narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 2.2rem !important;
|
|
font-weight: 650 !important;
|
|
}
|
|
|
|
/* Very narrow view (≤ 300px) - Minimal layout */
|
|
.tasknotes-plugin .pomodoro-view--very-narrow {
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__status {
|
|
font-size: var(--tn-font-size-sm);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__timer-section {
|
|
padding: var(--tn-spacing-sm) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--very-narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 2.5rem !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__time-controls {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__time-adjust-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-selector {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-buttons {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-select-button,
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-clear-button {
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__primary-controls {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__start-button,
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__pause-button,
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__stop-button {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__skip-break-button {
|
|
font-size: var(--tn-font-size-sm);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__stats {
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
/* Narrow view (≤ 400px) - Compact layout */
|
|
.tasknotes-plugin .pomodoro-view--narrow {
|
|
padding: var(--tn-spacing-lg);
|
|
gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 3rem !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__time-controls {
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__time-adjust-button {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__task-buttons {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__primary-controls {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__start-button,
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__pause-button,
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__stop-button {
|
|
font-size: var(--tn-font-size-md);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Small view (≤ 400px) - Enhanced compact layout */
|
|
.tasknotes-plugin .pomodoro-view--small {
|
|
padding: var(--tn-spacing-lg);
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--small .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 3.2rem !important;
|
|
font-weight: 550 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--small .pomodoro-view__primary-controls {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Medium-small view (≤ 500px) - Transitional layout */
|
|
.tasknotes-plugin .pomodoro-view--medium-small {
|
|
padding: var(--tn-spacing-lg);
|
|
gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--medium-small .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 3.6rem !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Medium view (≤ 600px) - Standard responsive adjustments */
|
|
.tasknotes-plugin .pomodoro-view--medium {
|
|
padding: var(--tn-spacing-xl);
|
|
gap: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--medium .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 4rem !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--medium .pomodoro-view__task-buttons {
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Wide view (> 600px) - Enhanced layout */
|
|
.tasknotes-plugin .pomodoro-view--wide {
|
|
padding: var(--tn-spacing-xl);
|
|
gap: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view.pomodoro-view--wide .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
|
|
font-size: 4.5rem !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
/* Task card responsiveness */
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .task-card,
|
|
.tasknotes-plugin .pomodoro-view--narrow .task-card {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .task-card__metadata,
|
|
.tasknotes-plugin .pomodoro-view--narrow .task-card__metadata {
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
/* Hide less essential elements in very narrow views */
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .task-card__context-menu {
|
|
display: none;
|
|
}
|
|
|
|
/* Adjust progress circle stroke width for small sizes */
|
|
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__progress-circle {
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__progress-circle {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
|
|
/* ===== POMODORO-STATS-VIEW.CSS ===== */
|
|
/* ================================================
|
|
POMODORO STATS VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Pomodoro Stats View Container - Root Block */
|
|
.tasknotes-plugin .pomodoro-stats-view {
|
|
padding: var(--tn-spacing-lg);
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xl);
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
STATS VIEW HEADER
|
|
================================================ */
|
|
|
|
/* Stats Header Container */
|
|
.tasknotes-plugin .pomodoro-stats-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__title {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__refresh-button {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__refresh-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* ================================================
|
|
STATS SECTIONS
|
|
================================================ */
|
|
|
|
/* Stats Section Container */
|
|
.tasknotes-plugin .pomodoro-stats-view__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__section-title {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* ================================================
|
|
OVERVIEW GRID
|
|
================================================ */
|
|
|
|
/* Overview Grid Container - Like TickTick */
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
/* Overview Card - Larger than regular stat cards */
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: var(--tn-spacing-xl);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-lg);
|
|
border: 1px solid var(--tn-border-color);
|
|
transition: all var(--tn-transition-fast);
|
|
min-height: 120px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
/* Overview Card Elements */
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-value {
|
|
font-size: 2.5rem;
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-interactive-accent);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-change {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-change.positive {
|
|
color: var(--tn-status-done-color, #10B981);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-change.negative {
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
/* ================================================
|
|
STATS GRID
|
|
================================================ */
|
|
|
|
/* Stats Grid Container */
|
|
.tasknotes-plugin .pomodoro-stats-view__stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Individual Stat Card */
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-lg);
|
|
border: 1px solid var(--tn-border-color);
|
|
text-align: center;
|
|
transition: all var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
/* Stat Card Elements */
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-value {
|
|
font-size: 2rem;
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-interactive-accent);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ================================================
|
|
RECENT SESSIONS
|
|
================================================ */
|
|
|
|
/* Recent Sessions Container */
|
|
.tasknotes-plugin .pomodoro-stats-view__recent-sessions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* No Sessions State */
|
|
.tasknotes-plugin .pomodoro-stats-view__no-sessions {
|
|
padding: var(--tn-spacing-xl);
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-md);
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* ================================================
|
|
SESSION ITEM
|
|
================================================ */
|
|
|
|
/* Session Item Container */
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto 1fr;
|
|
gap: var(--tn-spacing-md);
|
|
align-items: center;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
transition: background-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* Session Item Elements */
|
|
.tasknotes-plugin .pomodoro-stats-view__session-date {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
min-width: 100px;
|
|
font-family: var(--tn-font-mono);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-duration {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
font-family: var(--tn-font-mono);
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Session Status Badge */
|
|
.tasknotes-plugin .pomodoro-stats-view__session-status {
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-status--completed {
|
|
background: var(--tn-status-done-color, #10B981);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-status--interrupted {
|
|
background: var(--tn-color-error);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
/* Session Task */
|
|
.tasknotes-plugin .pomodoro-stats-view__session-task {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
text-align: right;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE DESIGN
|
|
================================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .pomodoro-stats-view {
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__refresh-button {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--tn-spacing-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-date,
|
|
.tasknotes-plugin .pomodoro-stats-view__session-duration,
|
|
.tasknotes-plugin .pomodoro-stats-view__session-task {
|
|
min-width: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-status {
|
|
justify-self: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .pomodoro-stats-view {
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card {
|
|
padding: var(--tn-spacing-lg);
|
|
min-height: 100px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-value {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item {
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
ACCESSIBILITY & REDUCED MOTION
|
|
================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card,
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card,
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item,
|
|
.tasknotes-plugin .pomodoro-stats-view__refresh-button {
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card:hover,
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Focus indicators for keyboard navigation */
|
|
.tasknotes-plugin .pomodoro-stats-view__refresh-button:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.tasknotes-plugin .pomodoro-stats-view__overview-card,
|
|
.tasknotes-plugin .pomodoro-stats-view__stat-card,
|
|
.tasknotes-plugin .pomodoro-stats-view__session-item {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .pomodoro-stats-view__session-status {
|
|
border: 2px solid currentColor;
|
|
}
|
|
}
|
|
|
|
/* ===== STATS-VIEW.CSS ===== */
|
|
/* ================================================
|
|
STATISTICS VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Statistics View Container - Root Block */
|
|
.tasknotes-plugin .stats-view {
|
|
padding: var(--tn-spacing-lg);
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xl);
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
STATS VIEW HEADER
|
|
================================================ */
|
|
|
|
/* Stats Header Container */
|
|
.tasknotes-plugin .stats-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__title {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__refresh-button {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
border: none;
|
|
box-shadow: none;
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__refresh-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* ================================================
|
|
STATS VIEW SECTIONS
|
|
================================================ */
|
|
|
|
/* Section Container */
|
|
.tasknotes-plugin .stats-view__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__section .setting-item {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__section .setting-item-name {
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
OVERVIEW GRID
|
|
================================================ */
|
|
|
|
/* Overview Grid Layout */
|
|
.tasknotes-plugin .stats-view__overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Overview Card */
|
|
.tasknotes-plugin .stats-view__overview-card {
|
|
background: var(--tn-background-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-md);
|
|
padding: var(--tn-spacing-md);
|
|
text-align: center;
|
|
transition: border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-card:hover {
|
|
border-color: var(--tn-accent-color);
|
|
}
|
|
|
|
/* Overview Values */
|
|
.tasknotes-plugin .stats-view__overview-value {
|
|
font-size: var(--tn-font-size-xxl);
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-accent-color);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ================================================
|
|
STATS GRID
|
|
================================================ */
|
|
|
|
/* Stats Grid Layout */
|
|
.tasknotes-plugin .stats-view__stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Stat Card */
|
|
.tasknotes-plugin .stats-view__stat-card {
|
|
background: var(--tn-background-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-md);
|
|
padding: var(--tn-spacing-md);
|
|
text-align: center;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__stat-card:hover {
|
|
border-color: var(--tn-accent-color);
|
|
}
|
|
|
|
/* Stat Values */
|
|
.tasknotes-plugin .stats-view__stat-value {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__stat-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ================================================
|
|
PROJECT STATS
|
|
================================================ */
|
|
|
|
/* Projects Container */
|
|
.tasknotes-plugin .stats-view__projects {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Project Item */
|
|
.tasknotes-plugin .stats-view__project-item {
|
|
background: var(--tn-background-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-md);
|
|
padding: var(--tn-spacing-md);
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item:hover {
|
|
border-color: var(--tn-accent-color);
|
|
}
|
|
|
|
/* Project Header */
|
|
.tasknotes-plugin .stats-view__project-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-name {
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
/* Project Content Grid */
|
|
.tasknotes-plugin .stats-view__project-content-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--tn-spacing-md);
|
|
align-items: center;
|
|
}
|
|
|
|
/* Progress Circle */
|
|
.tasknotes-plugin .stats-view__progress-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-circle-svg {
|
|
transform: rotate(-90deg);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-circle-bg {
|
|
fill: none;
|
|
stroke: var(--background-modifier-border);
|
|
stroke-width: 4;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-circle-fg {
|
|
fill: none;
|
|
stroke: var(--interactive-accent);
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
filter: brightness(1.1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Hover effect for progress circle */
|
|
.tasknotes-plugin .stats-view__project-item:hover .stats-view__progress-circle-fg {
|
|
stroke-width: 5;
|
|
filter: brightness(1.2) saturate(1.1);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-circle-text {
|
|
font-size: 14px;
|
|
font-weight: var(--tn-font-weight-bold);
|
|
fill: var(--tn-text-normal);
|
|
transform: rotate(90deg);
|
|
transform-origin: center;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-label {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Stats Container */
|
|
.tasknotes-plugin .stats-view__stats-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Project Stats Container */
|
|
.tasknotes-plugin .stats-view__project-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Individual Project Stat */
|
|
.tasknotes-plugin .stats-view__project-stat {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-background-primary);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ================================================
|
|
NO DATA STATE
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__no-data {
|
|
text-align: center;
|
|
padding: var(--tn-spacing-xl);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* More Projects Indicator */
|
|
.tasknotes-plugin .stats-view__more-projects {
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
padding: var(--tn-spacing-sm);
|
|
border-top: 1px solid var(--tn-border-color);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE DESIGN
|
|
================================================ */
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .stats-view {
|
|
padding: var(--tn-spacing-md);
|
|
gap: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__stats-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-stats {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
DARK MODE ADJUSTMENTS
|
|
================================================ */
|
|
|
|
.theme-dark .tasknotes-plugin .stats-view__overview-card,
|
|
.theme-dark .tasknotes-plugin .stats-view__stat-card,
|
|
.theme-dark .tasknotes-plugin .stats-view__project-item {
|
|
background: var(--tn-background-secondary);
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .stats-view__project-stat {
|
|
background: var(--tn-background-modifier-border);
|
|
}
|
|
|
|
/* ================================================
|
|
PROGRESS BARS
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--tn-background-modifier-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-top: var(--tn-spacing-xs);
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--tn-accent-color), var(--color-accent-2, var(--tn-accent-color)));
|
|
border-radius: 4px;
|
|
transition: width 0.6s ease-out;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
/* ================================================
|
|
VISUAL ENHANCEMENTS
|
|
================================================ */
|
|
|
|
/* Enhanced cards with gradients */
|
|
.tasknotes-plugin .stats-view__overview-card {
|
|
background: linear-gradient(135deg, var(--tn-background-secondary), var(--tn-background-primary));
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--tn-accent-color), var(--color-accent-2, var(--tn-accent-color)));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__overview-card:hover {
|
|
border-color: var(--tn-accent-color);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Enhanced overview values with animation */
|
|
.tasknotes-plugin .stats-view__overview-value {
|
|
font-size: var(--tn-font-size-xxl);
|
|
font-weight: var(--tn-font-weight-bold);
|
|
color: var(--tn-accent-color);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
line-height: 1.2;
|
|
animation: countUp 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes countUp {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Enhanced project items */
|
|
.tasknotes-plugin .stats-view__project-item {
|
|
background: linear-gradient(135deg, var(--tn-background-secondary), var(--tn-background-primary));
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Special styling for "No Project" items */
|
|
.tasknotes-plugin .stats-view__project-item--no-project {
|
|
background: linear-gradient(135deg, var(--tn-background-modifier-border), var(--tn-background-secondary));
|
|
border: 1px dashed var(--tn-text-muted);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--no-project::before {
|
|
background: linear-gradient(90deg, var(--tn-text-muted), var(--color-base-60));
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--no-project:hover {
|
|
border-color: var(--tn-text-muted);
|
|
opacity: 1;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--no-project .stats-view__project-name {
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .stats-view__project-item--no-project .stats-view__time-bar-fill {
|
|
background: linear-gradient(90deg, var(--color-base-60), var(--color-base-70));
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--no-project .stats-view__progress-circle-fg {
|
|
stroke: var(--color-base-60);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: var(--tn-accent-color);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item:hover {
|
|
border-color: var(--tn-accent-color);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Time visualization bars */
|
|
.tasknotes-plugin .stats-view__time-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
margin: var(--tn-spacing-xs) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__time-bar-visual {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: var(--tn-background-modifier-border);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__time-bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--color-green), var(--color-blue));
|
|
border-radius: 3px;
|
|
transition: width 0.8s ease-out;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__time-bar-label {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
white-space: nowrap;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Insight cards */
|
|
.tasknotes-plugin .stats-view__insight-card {
|
|
background: linear-gradient(135deg, var(--color-accent-2, var(--tn-accent-color)), var(--tn-accent-color));
|
|
color: var(--text-on-accent);
|
|
border-radius: var(--tn-border-radius-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
margin: var(--tn-spacing-md) 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__insight-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__insight-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__insight-title {
|
|
font-weight: var(--tn-font-weight-bold);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__insight-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ================================================
|
|
LOADING STATE
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-xl);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--tn-border-color);
|
|
border-top-color: var(--tn-accent-color);
|
|
border-radius: 50%;
|
|
margin-right: var(--tn-spacing-sm);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360px);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
FILTER CONTROLS
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__filters {
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--tn-spacing-md);
|
|
align-items: end;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-select,
|
|
.tasknotes-plugin .stats-view__filter-input {
|
|
padding: var(--tn-spacing-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
background: var(--tn-background-primary);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-select:focus,
|
|
.tasknotes-plugin .stats-view__filter-input:focus {
|
|
outline: none;
|
|
border-color: var(--tn-accent-color);
|
|
box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__custom-dates {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__date-input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__date-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__date-input {
|
|
padding: var(--tn-spacing-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
background: var(--tn-background-primary);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-buttons {
|
|
display: flex;
|
|
gap: var(--tn-spacing-sm);
|
|
align-items: end;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-button {
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
background: var(--tn-background-primary);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-button:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-button--reset {
|
|
border-color: var(--color-red);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-button--reset:hover {
|
|
background: var(--color-red);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
INTERACTIVE ELEMENTS
|
|
================================================ */
|
|
|
|
/* Clickable project items */
|
|
.tasknotes-plugin .stats-view__project-item--clickable {
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--clickable:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__click-indicator {
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-muted);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__project-item--clickable:hover .stats-view__click-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ================================================
|
|
SPARKLINES & TRENDS
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__trend-container {
|
|
margin: var(--tn-spacing-sm) 0;
|
|
padding: var(--tn-spacing-sm);
|
|
background: var(--tn-background-modifier-border);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__trend-label {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__sparkline {
|
|
height: 20px;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__sparkline-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--tn-accent-color);
|
|
}
|
|
|
|
/* ================================================
|
|
MODAL STYLES
|
|
================================================ */
|
|
|
|
/* Modal styles - no plugin scope needed since modals are appended to document.body */
|
|
.stats-view__modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: var(--layer-modal);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-lg, 16px);
|
|
}
|
|
|
|
.stats-view__modal {
|
|
background: var(--tn-background-primary, var(--background-primary));
|
|
border-radius: var(--tn-border-radius-lg, 8px);
|
|
max-width: 800px;
|
|
max-height: 80vh;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.stats-view__modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--tn-spacing-lg, 16px);
|
|
border-bottom: 1px solid var(--tn-border-color, var(--background-modifier-border));
|
|
}
|
|
|
|
.stats-view__modal-title {
|
|
font-size: var(--tn-font-size-lg, 18px);
|
|
font-weight: var(--tn-font-weight-bold, 600);
|
|
color: var(--tn-text-normal, var(--text-normal));
|
|
}
|
|
|
|
.stats-view__modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: var(--tn-font-size-xl, 20px);
|
|
color: var(--tn-text-muted, var(--text-muted));
|
|
cursor: var(--cursor);
|
|
padding: var(--tn-spacing-xs, 4px);
|
|
border-radius: var(--tn-border-radius-sm, 4px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.stats-view__modal-close:hover {
|
|
background: var(--tn-interactive-hover, var(--interactive-hover));
|
|
color: var(--tn-text-normal, var(--text-normal));
|
|
}
|
|
|
|
.stats-view__modal-content {
|
|
padding: var(--tn-spacing-lg, 16px);
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
/* ================================================
|
|
DRILL-DOWN CONTENT
|
|
================================================ */
|
|
|
|
/* Drill-down styles - no plugin scope needed since content is in modal */
|
|
.stats-view__drilldown-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--tn-spacing-md, 12px);
|
|
margin-bottom: var(--tn-spacing-xl, 24px);
|
|
}
|
|
|
|
.stats-view__drilldown-card {
|
|
background: var(--tn-background-secondary, var(--background-secondary));
|
|
border: 1px solid var(--tn-border-color, var(--background-modifier-border));
|
|
border-radius: var(--tn-border-radius-md, 6px);
|
|
padding: var(--tn-spacing-md, 12px);
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-view__drilldown-value {
|
|
font-size: var(--tn-font-size-xl, 20px);
|
|
font-weight: var(--tn-font-weight-bold, 600);
|
|
color: var(--tn-accent-color, var(--interactive-accent));
|
|
margin-bottom: var(--tn-spacing-xs, 4px);
|
|
}
|
|
|
|
.stats-view__drilldown-label {
|
|
font-size: var(--tn-font-size-sm, 12px);
|
|
color: var(--tn-text-muted, var(--text-muted));
|
|
}
|
|
|
|
.stats-view__drilldown-section {
|
|
margin-bottom: var(--tn-spacing-xl, 24px);
|
|
}
|
|
|
|
.stats-view__drilldown-heading {
|
|
font-size: var(--tn-font-size-md, 14px);
|
|
font-weight: var(--tn-font-weight-semibold, 500);
|
|
color: var(--tn-text-normal, var(--text-normal));
|
|
margin-bottom: var(--tn-spacing-md, 12px);
|
|
padding-bottom: var(--tn-spacing-xs, 4px);
|
|
border-bottom: 1px solid var(--tn-border-color, var(--background-modifier-border));
|
|
}
|
|
|
|
/* ================================================
|
|
ACTIVITY CHART
|
|
================================================ */
|
|
|
|
/* Activity chart styles - no plugin scope needed since content is in modal */
|
|
.stats-view__bar-chart {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: 2px;
|
|
height: 50px;
|
|
padding: var(--tn-spacing-sm, 8px);
|
|
background: var(--tn-background-secondary, var(--background-secondary));
|
|
border-radius: var(--tn-border-radius-sm, 4px);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.stats-view__bar-container {
|
|
display: flex;
|
|
align-items: end;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stats-view__bar {
|
|
width: 6px;
|
|
background: linear-gradient(to top, var(--tn-accent-color, var(--interactive-accent)), var(--color-accent-2, var(--tn-accent-color, var(--interactive-accent))));
|
|
border-radius: 1px 1px 0 0;
|
|
min-height: 1px;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.stats-view__bar:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ================================================
|
|
TASK LISTS IN DRILL-DOWN
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .stats-view__recent-tasks,
|
|
.tasknotes-plugin .stats-view__task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__recent-task {
|
|
background: var(--tn-background-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
padding: var(--tn-spacing-sm);
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__recent-task:hover {
|
|
border-color: var(--tn-accent-color);
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__task-title {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__task-meta {
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
/* Section headers and task filters */
|
|
.tasknotes-plugin .stats-view__section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__task-filters {
|
|
display: flex;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__task-count {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
background: var(--tn-background-modifier-border);
|
|
border-radius: var(--tn-border-radius-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE ENHANCEMENTS
|
|
================================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .stats-view__overview-card,
|
|
.tasknotes-plugin .stats-view__project-item {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__time-bar-label {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__custom-dates {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-buttons {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.tasknotes-plugin .stats-view__filter-button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
/* ===== SETTINGS-VIEW.CSS ===== */
|
|
/* ================================================
|
|
SETTINGS VIEW - MINIMAL CLEAN STRUCTURE
|
|
================================================ */
|
|
|
|
/* ================================================
|
|
SETTINGS HEADER
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .settings-header {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
margin-top: calc(-1 * var(--tn-spacing-sm));
|
|
}
|
|
|
|
.tasknotes-plugin .settings-header-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.tasknotes-plugin .settings-header-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-header-link::after {
|
|
content: "↗";
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* ================================================
|
|
TAB NAVIGATION
|
|
================================================ */
|
|
|
|
/* Tab Navigation Container */
|
|
.tasknotes-plugin .settings-view__tab-nav {
|
|
display: flex;
|
|
gap: var(--tn-spacing-xs);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-view__tab-button {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-view__tab-button--active,
|
|
.tasknotes-plugin .settings-view__tab-button.is-active {
|
|
background: var(--interactive-accent) !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
/* ================================================
|
|
TAB CONTENT
|
|
================================================ */
|
|
|
|
/* Tab Contents Container */
|
|
.tasknotes-plugin .settings-view__tab-contents {
|
|
position: relative;
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* Tab Content Panel */
|
|
.tasknotes-plugin .settings-view__tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-view__tab-content--active {
|
|
display: block;
|
|
animation: tn-settings-fade-in 0.2s ease-in-out;
|
|
}
|
|
|
|
@keyframes tn-settings-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
TASKNOTES SETTINGS CARD SYSTEM - CLEAN MINIMAL BASE
|
|
================================================ */
|
|
|
|
/* Base Card */
|
|
.tasknotes-settings__card {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.tasknotes-settings__card:hover {
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Card Header */
|
|
.tasknotes-settings__card-header {
|
|
padding: 12px 16px;
|
|
background: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-settings__card-header--with-drag-handle {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.tasknotes-settings__card-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-settings__card-primary-text {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--text-normal);
|
|
margin-bottom: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-settings__card-secondary-text {
|
|
font-size: 12px !important;
|
|
color: var(--text-muted) !important;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 1.3;
|
|
display: block;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.tasknotes-settings__card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__card-color-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 12px;
|
|
border: 2px solid var(--background-primary);
|
|
box-shadow: 0 0 0 1px var(--background-modifier-border);
|
|
}
|
|
|
|
/* Card Content */
|
|
.tasknotes-settings__card-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.tasknotes-settings__card-config-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.tasknotes-settings__card-config-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-settings__card-config-label {
|
|
min-width: 80px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-size: 13px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
/* Card Inputs */
|
|
.tasknotes-settings__card-input {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-modifier-form-field);
|
|
color: var(--text-normal);
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
min-height: 32px;
|
|
}
|
|
|
|
/* Select dropdowns need extra styling */
|
|
.tasknotes-settings__card-input[type="select"],
|
|
select.tasknotes-settings__card-input {
|
|
padding: 6px 12px;
|
|
line-height: 1.5;
|
|
min-height: 34px;
|
|
}
|
|
|
|
.tasknotes-settings__card-input[type="text"],
|
|
.tasknotes-settings__card-input[type="url"],
|
|
.tasknotes-settings__card-input[type="email"] {
|
|
flex: 0 1 auto;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.tasknotes-settings__card-input[type="checkbox"] {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
min-width: 16px !important;
|
|
min-height: 16px !important;
|
|
max-width: 16px !important;
|
|
max-height: 16px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
flex-shrink: 0 !important;
|
|
align-self: center !important;
|
|
}
|
|
|
|
.tasknotes-settings__card-input[type="color"] {
|
|
width: 40px;
|
|
height: 32px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.tasknotes-settings__card-input[type="number"] {
|
|
width: 80px;
|
|
}
|
|
|
|
.tasknotes-settings__card-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Card Actions */
|
|
.tasknotes-settings__card-actions {
|
|
padding: 12px 16px;
|
|
background: var(--background-modifier-form-field);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__card-action-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: var(--cursor);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tasknotes-settings__card-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-settings__card-action-btn--primary {
|
|
background: none;
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-settings__card-action-btn--primary:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.tasknotes-settings__card-action-btn--delete {
|
|
background: var(--color-red);
|
|
color: white;
|
|
border-color: var(--color-red);
|
|
}
|
|
|
|
/* Header Actions */
|
|
.tasknotes-settings__card-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tasknotes-settings__card-header-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: none !important;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor);
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
padding: 0;
|
|
}
|
|
|
|
.tasknotes-settings__card-header-btn:focus {
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.tasknotes-settings__card-header-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-settings__card-header-btn--delete:hover {
|
|
background: var(--color-red);
|
|
color: white;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.tasknotes-settings__card-status-badge {
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-settings__card-status-badge--active {
|
|
background: var(--color-green);
|
|
color: white;
|
|
}
|
|
|
|
.tasknotes-settings__card-status-badge--inactive {
|
|
background: var(--color-red);
|
|
color: white;
|
|
}
|
|
|
|
.tasknotes-settings__card-info-badge {
|
|
padding: 3px 6px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Selected Project Items (chips) */
|
|
.default-projects-list-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__project-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px 4px 12px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tasknotes-settings__project-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-settings__project-item span {
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-settings__project-item button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-settings__project-item button:hover {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-settings__project-item button svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
/* Drag Handle */
|
|
.tasknotes-settings__card-drag-handle {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 16px;
|
|
cursor: grab;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px;
|
|
transition: all 0.2s ease;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-settings__card-drag-handle:hover {
|
|
opacity: 1;
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-settings__card-drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Drag States */
|
|
.tasknotes-settings__card--draggable {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tasknotes-settings__card--dragging {
|
|
opacity: 0.7;
|
|
transform: rotate(1deg);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-settings__card--drag-over-top {
|
|
border-top: 2px solid var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-settings__card--drag-over-bottom {
|
|
border-bottom: 2px solid var(--interactive-accent);
|
|
}
|
|
|
|
/* Empty state for card containers */
|
|
.tasknotes-plugin .settings-view .tasknotes-settings__empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 2rem;
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px dashed var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-view .tasknotes-settings__empty-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-plugin .settings-view .tasknotes-settings__empty-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ================================================
|
|
COLLAPSIBLE CARD FUNCTIONALITY
|
|
================================================ */
|
|
|
|
/* Collapsible card support */
|
|
.tasknotes-settings__card--collapsible {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-settings__card--collapsible .tasknotes-settings__card-content,
|
|
.tasknotes-settings__card--collapsible .tasknotes-settings__card-actions {
|
|
transition: all 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Collapsed state - hide content and actions */
|
|
.tasknotes-settings__card--collapsed .tasknotes-settings__card-content {
|
|
max-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0;
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-settings__card--collapsed .tasknotes-settings__card-actions {
|
|
max-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0;
|
|
border: none;
|
|
}
|
|
|
|
/* Collapse button styling */
|
|
.tasknotes-settings__card-collapse-btn {
|
|
opacity: 0.7;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-settings__card-collapse-btn:hover {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Visual indicator for collapsed cards */
|
|
.tasknotes-settings__card--collapsed {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Clickable header styling */
|
|
.tasknotes-settings__card-header--clickable {
|
|
cursor: var(--cursor);
|
|
user-select: none;
|
|
}
|
|
|
|
.tasknotes-settings__card-header--clickable:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* ================================================
|
|
WEBHOOK MODAL STYLES
|
|
================================================ */
|
|
|
|
.tasknotes-webhook-modal {
|
|
max-width: 800px;
|
|
padding: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-icon {
|
|
color: var(--interactive-accent);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-title {
|
|
margin: 0;
|
|
color: var(--text-normal);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-section {
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-subsection-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-subsection-header h3 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-webhook-events-list .setting-item {
|
|
padding: var(--tn-spacing-sm) 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-events-list .setting-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasknotes-webhook-transform-help {
|
|
margin-top: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--tn-radius-sm);
|
|
border-left: 3px solid var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-help-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-webhook-help-list {
|
|
margin: var(--tn-spacing-sm) 0;
|
|
padding-left: var(--tn-spacing-lg);
|
|
color: var(--text-muted);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-webhook-help-list li {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-webhook-help-example {
|
|
margin-top: var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-buttons {
|
|
display: flex;
|
|
gap: var(--tn-spacing-sm);
|
|
justify-content: flex-end;
|
|
margin-top: var(--tn-spacing-xl);
|
|
padding-top: var(--tn-spacing-md);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 500;
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.save {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.save:hover {
|
|
background: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.cancel {
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.cancel:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn-icon {
|
|
font-size: 0.9rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Webhook Secret Notice */
|
|
.tasknotes-webhook-secret-notice {
|
|
text-align: center;
|
|
padding: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-content {
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-content p {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-code {
|
|
display: block;
|
|
background: var(--background-modifier-form-field);
|
|
padding: var(--tn-spacing-md);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--tn-font-size-sm);
|
|
word-break: break-all;
|
|
user-select: all;
|
|
border: 1px solid var(--background-modifier-border);
|
|
margin: var(--tn-spacing-md) 0;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-code:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
HELPER TEXT & WARNING SECTIONS
|
|
================================================ */
|
|
|
|
/* Help sections with lists */
|
|
.tasknotes-settings__help-section {
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.tasknotes-settings__help-section h4 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-settings__help-section ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.tasknotes-settings__help-section li {
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-settings__help-note {
|
|
margin: 12px 0 0 0;
|
|
padding: 12px;
|
|
background: var(--background-modifier-form-field);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Warning sections */
|
|
.tasknotes-settings__warning {
|
|
background: rgba(var(--color-red-rgb), 0.1);
|
|
border: 1px solid rgba(var(--color-red-rgb), 0.3);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
margin: 12px 0;
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-settings__warning strong {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* ================================================
|
|
FIELD MAPPING TABLE - CARD STYLE
|
|
================================================ */
|
|
|
|
.tasknotes-settings__table {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin: 16px 0;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.tasknotes-settings__table-header {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tasknotes-settings__table-header:first-child {
|
|
min-width: 140px;
|
|
width: 35%;
|
|
}
|
|
|
|
.tasknotes-settings__table-header:last-child {
|
|
width: 65%;
|
|
}
|
|
|
|
.tasknotes-settings__table-row {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-settings__table-row:nth-child(even) {
|
|
background: var(--background-modifier-form-field);
|
|
}
|
|
|
|
.tasknotes-settings__table-row:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-settings__table-cell {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
vertical-align: middle;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tasknotes-settings__table-cell:first-child {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-form-field);
|
|
}
|
|
|
|
.tasknotes-settings__table-cell:last-child {
|
|
background: inherit;
|
|
}
|
|
|
|
/* Remove border from last row */
|
|
.tasknotes-settings__table-row:last-child .tasknotes-settings__table-cell {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Field mapping input styling */
|
|
.field-mapping-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.field-mapping-input:hover {
|
|
border-color: var(--interactive-hover);
|
|
}
|
|
|
|
.field-mapping-input::placeholder {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ================================================
|
|
DEFAULT VISIBLE PROPERTIES STYLING
|
|
================================================ */
|
|
|
|
.tasknotes-settings__properties-container {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.tasknotes-settings__property-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tasknotes-settings__property-group-header {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-settings__property-toggles {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__property-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.tasknotes-settings__property-checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
.tasknotes-settings__property-label {
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
cursor: var(--cursor);
|
|
flex: 1;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tasknotes-settings__property-label:hover {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
COLLAPSIBLE SECTIONS
|
|
================================================ */
|
|
|
|
.tasknotes-settings__collapsible-header {
|
|
cursor: var(--cursor);
|
|
padding: 8px 12px;
|
|
margin: -8px -12px 12px -12px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-icon {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
transition: transform 0.2s ease;
|
|
font-family: monospace;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-content {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Nested collapsible sections (e.g., filter settings within custom fields) */
|
|
.tasknotes-settings__collapsible-section {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: var(--cursor);
|
|
padding: 8px 12px;
|
|
margin: 0 -12px 12px -12px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-header:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-settings__filter-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-settings__filter-badge svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-chevron {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-chevron svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section-content {
|
|
max-height: none;
|
|
opacity: 1;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Collapsed state */
|
|
.tasknotes-settings__collapsible-section--collapsed .tasknotes-settings__collapsible-section-content {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-settings__collapsible-section--collapsed .tasknotes-settings__collapsible-section-chevron {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* ================================================
|
|
ICON INPUT WITH SUGGESTIONS
|
|
================================================ */
|
|
|
|
/* Icon input container with preview */
|
|
.tasknotes-plugin .icon-input-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .icon-input-preview {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--background-modifier-hover);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .icon-input-preview svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .icon-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Icon suggestion dropdown items */
|
|
.suggestion-item.icon-suggestion-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
}
|
|
|
|
.icon-suggestion-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-suggestion-preview svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.icon-suggestion-text {
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* Highlight matched icon in suggestions */
|
|
.suggestion-item.icon-suggestion-item.is-selected .icon-suggestion-preview svg {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.suggestion-item.icon-suggestion-item.is-selected .icon-suggestion-text {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
ACCESSIBILITY & REDUCED MOTION
|
|
================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .settings-view__tab-content--active {
|
|
animation: none;
|
|
}
|
|
|
|
.tasknotes-settings__card,
|
|
.tasknotes-settings__card-drag-handle {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* ===== WEBHOOK-SETTINGS.CSS ===== */
|
|
/*
|
|
* Webhook Settings UI Styles
|
|
* Modern, clean styling for the webhook configuration interface
|
|
*/
|
|
|
|
/* Webhook Container */
|
|
.tasknotes-webhooks-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Empty State */
|
|
.tasknotes-webhooks-empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 2rem;
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px dashed var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tasknotes-webhooks-empty-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tasknotes-webhooks-empty-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Webhook Card */
|
|
.tasknotes-webhook-card {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-card:hover {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Webhook Header */
|
|
.tasknotes-webhook-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-url-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-url-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-url {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.85rem;
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-webhook-status-section {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 16px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-webhook-status-indicator.active {
|
|
background: var(--color-green-rgb);
|
|
background: rgba(var(--color-green-rgb), 0.15);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.tasknotes-webhook-status-indicator.inactive {
|
|
background: var(--color-red-rgb);
|
|
background: rgba(var(--color-red-rgb), 0.15);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.tasknotes-webhook-status-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-webhook-status-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Webhook Content */
|
|
.tasknotes-webhook-content {
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-row.warning {
|
|
background: rgba(var(--color-yellow-rgb), 0.1);
|
|
border-radius: 4px;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-left: -0.75rem;
|
|
margin-right: -0.75rem;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-muted);
|
|
margin-top: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-label {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
min-width: 5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-value {
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-webhook-detail-warning {
|
|
color: var(--color-yellow);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Webhook Statistics */
|
|
.tasknotes-webhook-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.tasknotes-webhook-stat-success,
|
|
.tasknotes-webhook-stat-failure {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.tasknotes-webhook-stat-success {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.tasknotes-webhook-stat-failure {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.tasknotes-webhook-stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Webhook Actions */
|
|
.tasknotes-webhook-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--background-modifier-form-field);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 0.85rem;
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.enable {
|
|
background: var(--color-green);
|
|
color: white;
|
|
border-color: var(--color-green);
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.enable:hover {
|
|
background: var(--color-green);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.disable {
|
|
background: var(--color-orange);
|
|
color: white;
|
|
border-color: var(--color-orange);
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.disable:hover {
|
|
background: var(--color-orange);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.delete {
|
|
background: var(--color-red);
|
|
color: white;
|
|
border-color: var(--color-red);
|
|
}
|
|
|
|
.tasknotes-webhook-action-btn.delete:hover {
|
|
background: var(--color-red);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tasknotes-webhook-action-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-webhook-action-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Webhook Modal */
|
|
.tasknotes-webhook-modal .modal {
|
|
width: auto;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.tasknotes-webhook-modal .modal-content {
|
|
width: 600px;
|
|
max-width: 90vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tasknotes-webhook-modal * {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Better styling for Settings in modal */
|
|
.tasknotes-webhook-modal .setting-item {
|
|
padding: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-modal .setting-item:hover {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal .setting-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-webhook-modal .setting-item-info {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.tasknotes-webhook-modal .setting-item-name {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-webhook-modal .setting-item-description {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.25rem;
|
|
border-bottom: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--interactive-accent);
|
|
padding: 0.5rem;
|
|
background: rgba(var(--interactive-accent-rgb), 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-title {
|
|
margin: 0;
|
|
color: var(--text-normal);
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-section {
|
|
margin-bottom: 2rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-subsection-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-subsection-header span {
|
|
color: var(--interactive-accent);
|
|
padding: 0.25rem;
|
|
background: rgba(var(--interactive-accent-rgb), 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-subsection-header h3 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
/* Events List */
|
|
.tasknotes-webhook-events-list {
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
|
|
/* Transform Help */
|
|
.tasknotes-webhook-transform-help {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 1.25rem;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.tasknotes-webhook-help-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-webhook-help-list {
|
|
margin: 0.75rem 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.tasknotes-webhook-help-list li {
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.tasknotes-webhook-help-example {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
font-size: 0.9rem;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Modal Buttons */
|
|
.tasknotes-webhook-modal-buttons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: flex-end;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: var(--cursor);
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.cancel {
|
|
background: var(--background-secondary);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.cancel:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.save {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn.save:hover {
|
|
background: var(--interactive-accent-hover);
|
|
border-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Secret Notice */
|
|
.tasknotes-webhook-secret-notice {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.tasknotes-webhook-secret-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.tasknotes-webhook-secret-content {
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-webhook-secret-code {
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
padding: 0.2rem 0.4rem;
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.85rem;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-webhook-modal .modal-content {
|
|
width: 95vw;
|
|
}
|
|
|
|
.tasknotes-webhook-card {
|
|
margin: 0 -0.5rem;
|
|
}
|
|
|
|
.tasknotes-webhook-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.tasknotes-webhook-url-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-webhook-modal-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-webhook-stats {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
.theme-dark .tasknotes-webhook-card:hover {
|
|
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
.tasknotes-webhook-action-btn:focus,
|
|
.tasknotes-webhook-modal-btn:focus {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animation for status changes */
|
|
.tasknotes-webhook-status-indicator {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-card {
|
|
transition: all 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-webhook-card:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ===== STATUS-BAR.CSS ===== */
|
|
/* TaskNotes Status Bar Styles */
|
|
|
|
.tasknotes-status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
transition: background-color 0.2s ease;
|
|
min-width: 0; /* Allow text truncation */
|
|
}
|
|
|
|
.tasknotes-status-bar:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-status-icon {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-status-text {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-muted);
|
|
max-width: 200px; /* Limit width to prevent status bar from being too wide */
|
|
}
|
|
|
|
.tasknotes-status-bar:hover .tasknotes-status-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Responsive behavior for smaller screens */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-status-text {
|
|
max-width: 120px;
|
|
}
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
.theme-dark .tasknotes-status-bar {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.theme-dark .tasknotes-status-bar:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Light theme adjustments */
|
|
.theme-light .tasknotes-status-bar {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.theme-light .tasknotes-status-bar:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* ===== BASES-VIEWS.CSS ===== */
|
|
/* ================================================
|
|
BASES VIEWS - TaskNotes Integration Styles
|
|
================================================ */
|
|
|
|
/* ================================================
|
|
CUSTOM NEW TASK BUTTON
|
|
Toggle between native and TaskNotes "New" button
|
|
================================================ */
|
|
|
|
/* Hide TaskNotes button by default */
|
|
.tn-bases-new-task-btn {
|
|
display: none;
|
|
}
|
|
|
|
/* When a TaskNotes view is active: show our button, hide native */
|
|
.tasknotes-view-active .tn-bases-new-task-btn {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-view-active .bases-toolbar-new-item-menu {
|
|
display: none;
|
|
}
|
|
|
|
/* Bases TaskNotes List View Container */
|
|
.tn-bases-tasknotes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
width: 100%;
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Task Group Section (matches TaskListView structure) */
|
|
.tn-bases-tasknotes-list .task-section.task-group {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Group Header */
|
|
.tn-bases-tasknotes-list .task-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
justify-content: flex-start;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-md) var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
position: relative;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.4;
|
|
cursor: var(--cursor);
|
|
}
|
|
|
|
/* Count element within group headers */
|
|
.tn-bases-tasknotes-list .task-group-header .agenda-view__item-count {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Toggle button for groups */
|
|
.tn-bases-tasknotes-list .task-group-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
cursor: var(--cursor);
|
|
padding: 0;
|
|
}
|
|
|
|
/* Default expanded state - chevron pointing down */
|
|
.tn-bases-tasknotes-list .task-group .task-group-toggle svg {
|
|
color: var(--tn-text-normal);
|
|
transition: transform 0.2s ease;
|
|
transform: rotate(90deg) !important;
|
|
}
|
|
|
|
/* Collapsed state - chevron pointing right */
|
|
.tn-bases-tasknotes-list .task-group.is-collapsed .task-group-toggle svg {
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
|
|
/* Hide task cards when collapsed */
|
|
.tn-bases-tasknotes-list .task-group.is-collapsed .task-cards {
|
|
display: none;
|
|
}
|
|
|
|
/* Sub-group header styling */
|
|
.tn-tasknoteTaskList .task-group[data-level="sub"] {
|
|
padding-left: 16px; /* Subtle indentation */
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-header {
|
|
font-size: 0.95em;
|
|
font-weight: 500; /* Less bold than primary */
|
|
color: var(--tn-text-muted);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-toggle {
|
|
opacity: 0.8; /* Slightly more subtle chevron */
|
|
}
|
|
|
|
.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-toggle svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Task cards container */
|
|
.tn-bases-tasknotes-list .tasks-container.task-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
padding-left: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Empty state */
|
|
.tn-bases-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--tn-spacing-xl);
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin: var(--tn-spacing-lg) 0;
|
|
}
|
|
|
|
/* Kanban Board Styles */
|
|
.tn-bases-kanban-board {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
overflow-x: auto;
|
|
padding: var(--tn-spacing-sm);
|
|
min-height: 400px;
|
|
}
|
|
|
|
.tn-bases-kanban-column {
|
|
flex: 0 0 280px;
|
|
min-width: 280px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tn-bases-kanban-column-header {
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-primary);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tn-bases-kanban-column-name {
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tn-bases-kanban-column-count {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
padding: 2px 8px;
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tn-bases-kanban-tasks {
|
|
flex: 1;
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Drag and drop styles */
|
|
.tn-bases-kanban-tasks.drag-over {
|
|
background: var(--tn-interactive-hover);
|
|
border: 2px dashed var(--tn-interactive-accent);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* Bases Calendar List View - minimalist styling */
|
|
.fc-event-default-list {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
margin: var(--tn-spacing-xs) 0;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* Style FullCalendar list view structure */
|
|
#bases-calendar .fc-list {
|
|
background: transparent;
|
|
}
|
|
|
|
#bases-calendar .fc-list-table {
|
|
background: transparent;
|
|
}
|
|
|
|
#bases-calendar .fc-list-event {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
#bases-calendar .fc-list-event:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
#bases-calendar .fc-list-day-cushion {
|
|
background: transparent;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-xs);
|
|
border-bottom: 1px solid var(--tn-divider-color);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
#bases-calendar .fc-list-day {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Override FullCalendar's bright white border color in dark mode */
|
|
.theme-dark #bases-calendar.fc-theme-standard {
|
|
--fc-border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
/* Responsive design for Bases views */
|
|
@media (max-width: 768px) {
|
|
.tn-bases-kanban-board {
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tn-bases-kanban-column {
|
|
flex: 0 0 240px;
|
|
min-width: 240px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tn-bases-tasknotes-list .task-group-header {
|
|
font-size: var(--tn-font-size-md);
|
|
padding: var(--tn-spacing-sm) 0 var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tn-bases-kanban-column {
|
|
flex: 0 0 200px;
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
SWIMLANE KANBAN LAYOUT
|
|
================================================ */
|
|
|
|
/* Board with swimlanes - use CSS Grid instead of flexbox */
|
|
.kanban-view__board--swimlanes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
overflow: auto;
|
|
padding: var(--tn-spacing-sm);
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* Each swimlane row */
|
|
.kanban-view__swimlane-row {
|
|
display: grid;
|
|
/* First column is the swimlane label with fixed width, rest are kanban columns */
|
|
grid-template-columns: var(--kanban-swimlane-label-width, 120px);
|
|
grid-auto-columns: var(--kanban-column-width, 280px);
|
|
grid-auto-flow: column;
|
|
gap: 1px;
|
|
background: var(--tn-border-color);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-bottom: none;
|
|
min-width: max-content;
|
|
}
|
|
|
|
/* Last row gets bottom border */
|
|
.kanban-view__swimlane-row:last-child {
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Header row styling */
|
|
.kanban-view__swimlane-row--header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: var(--tn-bg-primary);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
}
|
|
|
|
/* Swimlane label cell (leftmost column) */
|
|
.kanban-view__swimlane-label {
|
|
background: var(--tn-bg-secondary);
|
|
padding: var(--tn-spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
border-right: 1px solid var(--tn-border-color);
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Swimlane title */
|
|
.kanban-view__swimlane-title {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
/* Swimlane task count */
|
|
.kanban-view__swimlane-count {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-primary);
|
|
padding: 2px 6px;
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* Column header cell in header row */
|
|
.kanban-view__column-header-cell {
|
|
background: var(--tn-bg-secondary);
|
|
padding: var(--tn-spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
cursor: grab;
|
|
user-select: none;
|
|
transition: all var(--tn-transition-fast);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.kanban-view__column-header-cell:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.kanban-view__column-header-cell--dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(2deg);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.kanban-view__column-header-cell .kanban-view__column-title {
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
/* Individual swimlane column cells (data cells) */
|
|
.kanban-view__swimlane-column {
|
|
background: var(--tn-bg-primary);
|
|
padding: var(--tn-spacing-sm);
|
|
min-height: 100px;
|
|
max-height: var(--kanban-swimlane-max-height, 600px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Tasks container within each cell */
|
|
.kanban-view__swimlane-column .kanban-view__tasks-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Drag over state for swimlane cells */
|
|
.kanban-view__swimlane-column--dragover {
|
|
background: var(--tn-interactive-hover);
|
|
outline: 2px dashed var(--tn-interactive-accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Responsive adjustments for swimlanes */
|
|
@media (max-width: 1200px) {
|
|
.kanban-view__swimlane-row > :first-child {
|
|
width: 150px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.kanban-view__swimlane-label {
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.kanban-view__swimlane-row > :first-child {
|
|
width: 120px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.kanban-view__swimlane-title {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.kanban-view__column-header-cell .kanban-view__column-title {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
}
|
|
|