mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
deb1afa896
• Introduce a new PomodoroStatsView to display detailed session statistics. - Created a new file (src/views/PomodoroStatsView.ts) with UI components that render today’s progress, weekly summaries, overall statistics, and a list of recent work sessions. - Integrated refresh functionality and data calculations (e.g., current streak, average session length, completion rate) using data from the pomodoroService. • Update the main plugin registration (src/main.ts): - Import the new PomodoroStatsView. - Register the POMODORO_STATS_VIEW_TYPE. - Add a command (‘open-pomodoro-stats’) to allow users to open the Pomodoro statistics view. - Add an activatePomodoroStatsView method to switch to the new view. - Ensure that when workspace leaves are detached, leaves of type POMODORO_STATS_VIEW_TYPE are also removed. • Update task filtering and status management: - In FilterService.ts, update the “No Due Date” string to “No due date” for consistency. - In StatusManager.ts, add a new getNonCompletionStatuses method to retrieve status configurations excluding completed statuses—this is used to manage recurring tasks. • Enhance recurring task UI and behavior in TaskCard component (src/ui/TaskCard.ts): - Modify task cards to detect recurring tasks and conditionally append a “recurring-task” CSS class. - Insert a recurring indicator icon in the task card for recurring tasks. - Update context menu logic to show only non-completion statuses (via getNonCompletionStatuses) for recurring tasks. - Add a menu item that toggles the completion state for recurring tasks for the current date. - Update the task card DOM structure (both initial creation and update) to add or remove the recurring indicator as needed. - Update the import statements to include new helper functions (shouldUseRecurringTaskUI and getRecurringTaskCompletionText). • Extend helper functions (src/utils/helpers.ts): - Introduce shouldShowRecurringTaskOnDate to determine if a recurring task is due on a target date. - Add getRecurringTaskCompletionText to generate completion state text for a recurring task on a specific date. - Add shouldUseRecurringTaskUI to decide if recurring task UI behavior should be applied. • Update PomodoroView (src/views/PomodoroView.ts): - Add a “View All Stats” button to the stats section that opens the PomodoroStatsView when clicked. • Define new view type (src/types.ts): - Add constant POMODORO_STATS_VIEW_TYPE for consistent usage when registering and activating the stats view. • Introduce new CSS styles (styles.css): - Add styling for recurring tasks (e.g., a colored left border and gradient background for cards marked as recurring). - Define styles for the recurring indicator element. - Implement comprehensive styles for the Pomodoro Stats view, including layout grids, header styling, cards for different statistics (pomodoros, streak, minutes, average session, completion rate), and styling for recent sessions. This commit provides substantial enhancements by adding a focused Pomodoro statistics interface and by improving the handling and visual feedback for recurring tasks throughout the application.
6094 lines
134 KiB
CSS
6094 lines
134 KiB
CSS
/* TaskNotes Plugin Styles */
|
|
|
|
/* Design System Variables */
|
|
:root {
|
|
/* Denser spacing scale (3px base for more compact layouts) */
|
|
--cs-spacing-xs: 3px;
|
|
--cs-spacing-sm: 6px;
|
|
--cs-spacing-md: 12px;
|
|
--cs-spacing-lg: 18px;
|
|
--cs-spacing-xl: 24px;
|
|
|
|
/* Minimal border radius */
|
|
--cs-radius-sm: 2px;
|
|
--cs-radius-md: 3px;
|
|
--cs-radius-lg: 4px;
|
|
|
|
/* Touch target minimum */
|
|
--cs-touch-target: 36px;
|
|
|
|
/* Smaller indicator sizes for density */
|
|
--cs-indicator-sm: 4px;
|
|
--cs-indicator-md: 6px;
|
|
--cs-indicator-lg: 8px;
|
|
|
|
/* Faster transitions for responsiveness */
|
|
--cs-transition-fast: 120ms ease;
|
|
--cs-transition-normal: 200ms ease;
|
|
|
|
/* Typography scale for information density */
|
|
--cs-text-xs: 0.65rem;
|
|
--cs-text-sm: 0.75rem;
|
|
--cs-text-base: 0.8rem;
|
|
--cs-text-md: 0.85rem;
|
|
--cs-text-lg: 0.9rem;
|
|
}
|
|
|
|
/* 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 task-flash {
|
|
0% {
|
|
background-color: var(--interactive-accent-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes task-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
@keyframes task-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Task update animations */
|
|
.task-flash {
|
|
animation: task-flash 1500ms ease-out;
|
|
}
|
|
|
|
.task-pulse {
|
|
animation: task-pulse 1000ms ease-in-out;
|
|
}
|
|
|
|
.task-fade-in {
|
|
animation: task-fade-in 300ms ease-out;
|
|
}
|
|
|
|
/* ================================================
|
|
UNIFIED CARD BASE CLASS (BEM Methodology)
|
|
================================================ */
|
|
|
|
/* Base card class with common properties */
|
|
.tasknotes-card {
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: var(--cs-text-base);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tasknotes-card:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Card modifiers for different sizes */
|
|
.tasknotes-card--compact {
|
|
padding: var(--cs-spacing-sm);
|
|
border-radius: var(--cs-radius-sm);
|
|
}
|
|
|
|
.tasknotes-card--normal {
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border-radius: var(--cs-radius-sm);
|
|
}
|
|
|
|
.tasknotes-card--spacious {
|
|
padding: var(--cs-spacing-lg);
|
|
border-radius: var(--cs-radius-md);
|
|
}
|
|
|
|
/* Card modifiers for different shadows */
|
|
.tasknotes-card--shadow-light {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.tasknotes-card--shadow-medium {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Card modifiers for layout */
|
|
.tasknotes-card--flex {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-card--flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* Active time tracking indicator */
|
|
.task-card.actively-tracked {
|
|
position: relative;
|
|
}
|
|
|
|
.task-card.actively-tracked::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(45deg, var(--interactive-accent), var(--interactive-accent-hover));
|
|
border-radius: var(--radius-m);
|
|
z-index: -1;
|
|
animation: tracking-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes tracking-pulse {
|
|
0%, 100% {
|
|
opacity: 0.3;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
|
|
/* Visual feedback for updates */
|
|
.task-updated {
|
|
border-left: 3px solid var(--interactive-accent);
|
|
transition: border-left 1500ms ease-out;
|
|
}
|
|
|
|
/* Loading states optimization */
|
|
.loading-indicator {
|
|
transition: opacity var(--cs-transition-fast);
|
|
}
|
|
|
|
.loading-indicator.is-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Performance-optimized DOM transitions */
|
|
.tasknotes-card {
|
|
transition: transform var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.tasknotes-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Cache loading states */
|
|
.cache-loading-indicator {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--cs-radius-sm);
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
margin-bottom: var(--cs-spacing-md);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
z-index: 10;
|
|
animation: task-fade-in 300ms ease-out;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.is-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.is-loading {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Pomodoro timer warning state */
|
|
.pomodoro-timer-warning {
|
|
color: var(--text-warning) !important;
|
|
animation: pulse-warning 1s infinite;
|
|
}
|
|
|
|
@keyframes pulse-warning {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Task Selector Modal Styles */
|
|
.task-suggestion {
|
|
padding: var(--cs-spacing-sm);
|
|
border-radius: var(--cs-radius-sm);
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.task-suggestion-title {
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.task-title {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-title.task-priority-high {
|
|
color: var(--text-error);
|
|
border-left-color: var(--text-error);
|
|
}
|
|
|
|
.task-title.task-priority-low {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-suggestion-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-due-date {
|
|
padding: 2px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-modifier-border);
|
|
}
|
|
|
|
.task-due-date.task-overdue {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-due-date.task-due-today {
|
|
background: var(--background-modifier-success);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.task-contexts {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.task-context-tag {
|
|
padding: 1px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-secondary);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.task-status {
|
|
padding: 2px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: var(--cs-text-xs);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.task-status-in-progress {
|
|
background: var(--color-blue);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Pomodoro Task Selector Styles */
|
|
.pomodoro-task-selector-container {
|
|
display: flex;
|
|
gap: var(--cs-spacing-sm);
|
|
align-items: center;
|
|
margin-top: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-task-select-button {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
transition: border-color var(--cs-transition-fast);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.pomodoro-task-select-button:hover {
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.pomodoro-task-select-button.pomodoro-no-task {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.pomodoro-task-clear-button {
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-task-clear-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Filename Preview Styles */
|
|
.filename-preview {
|
|
padding: var(--cs-spacing-sm);
|
|
margin-top: var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.filename-preview-valid {
|
|
background: var(--background-modifier-success-rgb);
|
|
border-color: var(--background-modifier-success);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.filename-preview-error {
|
|
background: var(--background-modifier-error-rgb);
|
|
border-color: var(--background-modifier-error);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
/* Processing state for buttons - scope to TaskNotes buttons only */
|
|
.tasknotes-container button.processing,
|
|
.tasknotes-button.processing {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-container button.processing::after,
|
|
.tasknotes-button.processing::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: spinner 0.8s linear infinite;
|
|
}
|
|
|
|
/* Accessibility - Focus Styles */
|
|
.calendar-day:focus:not(.selected),
|
|
.tasknotes-tab:focus,
|
|
.task-toggle-button:focus,
|
|
.calendar-nav button:focus,
|
|
.add-task-button:focus,
|
|
.refresh-tasks-button:focus,
|
|
.refresh-notes-button:focus,
|
|
.task-status-select:focus,
|
|
.task-priority-select:focus,
|
|
.task-due-date-input:focus {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
/* Selected calendar days shouldn't show focus outline since selection is already visually clear */
|
|
.calendar-day:focus.selected {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Skip link for keyboard users */
|
|
.a11y-skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 8px;
|
|
z-index: 100;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.a11y-skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* Main container for all views - denser layout */
|
|
.tasknotes-container {
|
|
padding: var(--cs-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* Specific container styles for calendar and detail views */
|
|
.calendar-view-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.detail-view-container {
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Header for detail view - more compact */
|
|
.detail-view-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
padding: var(--cs-spacing-xs) 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.detail-view-actions {
|
|
display: flex;
|
|
gap: var(--cs-spacing-xs);
|
|
align-items: center;
|
|
}
|
|
|
|
.detail-view-header h2 {
|
|
margin: 0;
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Week view prompt */
|
|
.week-view-prompt {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Calendar Month View - more compact */
|
|
.calendar-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
padding: var(--cs-spacing-xs);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--cs-radius-sm);
|
|
gap: var(--cs-spacing-xs);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.calendar-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
/* We're removing the keyboard nav hint */
|
|
|
|
.month-navigation-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.nav-button-group {
|
|
display: flex;
|
|
border: none;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
gap: 2px;
|
|
}
|
|
|
|
.nav-arrow-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-faint);
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
font-size: 0.9rem;
|
|
line-height: 1;
|
|
min-height: 24px;
|
|
min-width: 28px;
|
|
transition: opacity 0.15s ease;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.nav-arrow-button:first-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.nav-arrow-button:hover {
|
|
background-color: transparent;
|
|
color: var(--text-normal);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Calendar colorize mode selector styling */
|
|
.colorize-mode-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.colorize-mode-select {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 100px;
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.colorize-mode-select:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.colorize-mode-select:focus {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
outline: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.calendar-nav button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-faint);
|
|
cursor: pointer;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border-radius: 0;
|
|
font-size: 0.9rem;
|
|
min-height: 28px;
|
|
min-width: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.15s ease;
|
|
box-shadow: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.calendar-nav button:hover {
|
|
background-color: transparent;
|
|
color: var(--text-normal);
|
|
border-color: transparent;
|
|
transform: none;
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.today-button {
|
|
margin-left: auto;
|
|
background: transparent;
|
|
color: var(--text-faint);
|
|
padding: 4px 12px;
|
|
font-size: 0.75rem;
|
|
min-height: 24px;
|
|
border: none;
|
|
font-weight: normal;
|
|
opacity: 0.7;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.today-button:hover {
|
|
background-color: transparent;
|
|
color: var(--text-normal);
|
|
opacity: 1;
|
|
}
|
|
|
|
.current-month {
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
min-width: 7rem;
|
|
text-align: center;
|
|
color: var(--text-normal);
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.view-switcher {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.view-switcher button {
|
|
border-radius: 0;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-faint);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.view-switcher button:hover {
|
|
opacity: 1;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.view-switcher button.active {
|
|
background-color: transparent;
|
|
color: var(--text-normal);
|
|
opacity: 1;
|
|
font-weight: 500;
|
|
border-bottom: 1px solid var(--text-normal);
|
|
}
|
|
|
|
.calendar-grid-container {
|
|
margin-bottom: var(--cs-spacing-md);
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.calendar-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.calendar-week {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
}
|
|
|
|
.calendar-day-header {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: var(--cs-text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--cs-spacing-xs);
|
|
color: var(--text-muted);
|
|
background: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
min-height: 2rem;
|
|
padding: var(--cs-spacing-xs);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--background-primary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
transition: all var(--cs-transition-fast);
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.calendar-day:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
border-color: transparent;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.calendar-day.today {
|
|
background: transparent;
|
|
color: var(--interactive-accent);
|
|
font-weight: 600;
|
|
box-shadow: none;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-day.today::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
}
|
|
|
|
.calendar-day.selected,
|
|
.week-day-header.selected {
|
|
border: 1px solid var(--interactive-accent);
|
|
font-weight: 500;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Style for dates that are selected but not today */
|
|
.calendar-day.selected:not(.today),
|
|
.week-day-header.selected:not(.today) {
|
|
background-color: var(--background-modifier-form-field);
|
|
}
|
|
|
|
/* Style for dates that are both today and selected */
|
|
.calendar-day.today.selected,
|
|
.week-day-header.today.selected {
|
|
box-shadow: 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
/* Ensure selected state overrides content indicator borders */
|
|
.calendar-day.selected.has-few-notes,
|
|
.calendar-day.selected.has-some-notes,
|
|
.calendar-day.selected.has-many-notes,
|
|
.calendar-day.selected.has-tasks,
|
|
.calendar-day.selected.has-completed-tasks,
|
|
.calendar-day.selected.has-archived-tasks,
|
|
.calendar-day.selected.has-daily-note {
|
|
border: 1px solid var(--interactive-accent);
|
|
}
|
|
|
|
.calendar-day.outside-month {
|
|
color: var(--text-faint);
|
|
background-color: transparent;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.day-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin: 2px;
|
|
}
|
|
|
|
.indicator-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.has-note {
|
|
background-color: var(--interactive-accent);
|
|
}
|
|
|
|
.has-task {
|
|
background-color: var(--text-error);
|
|
}
|
|
|
|
.is-important {
|
|
background-color: var(--text-warning);
|
|
}
|
|
|
|
/* Calendar day indicators */
|
|
.calendar-day {
|
|
position: relative;
|
|
}
|
|
|
|
/* Base indicator styles - Hidden since we highlight the whole box */
|
|
.note-indicator,
|
|
.task-indicator,
|
|
.daily-note-indicator {
|
|
display: none;
|
|
}
|
|
|
|
/* Position indicators differently to avoid overlap */
|
|
.note-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
bottom: 4px;
|
|
left: 30%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.task-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
bottom: 4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.daily-note-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
bottom: 4px;
|
|
left: 70%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* Hover effect for all indicators */
|
|
.calendar-day:hover .note-indicator,
|
|
.calendar-day:hover .task-indicator,
|
|
.calendar-day:hover .daily-note-indicator {
|
|
transform: translateX(-50%) scale(1.2);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Notes heatmap indicators - blues of different intensity with better contrast */
|
|
.note-indicator.few-notes {
|
|
background: linear-gradient(135deg, #7BA7E7, #5a8de3);
|
|
width: var(--cs-indicator-sm);
|
|
height: var(--cs-indicator-sm);
|
|
}
|
|
|
|
.note-indicator.some-notes {
|
|
background: linear-gradient(135deg, #4E82E4, #3670d9);
|
|
width: var(--cs-indicator-md);
|
|
height: var(--cs-indicator-md);
|
|
}
|
|
|
|
.note-indicator.many-notes {
|
|
background: linear-gradient(135deg, #2D65D0, #1e56c2);
|
|
width: var(--cs-indicator-lg);
|
|
height: var(--cs-indicator-lg);
|
|
}
|
|
|
|
/* Task indicators - reds for due, greens for completed, gray for archived */
|
|
.task-indicator.due-tasks {
|
|
background: linear-gradient(135deg, #FF6B6B, var(--text-error));
|
|
width: var(--cs-indicator-md);
|
|
height: var(--cs-indicator-md);
|
|
}
|
|
|
|
.task-indicator.completed-tasks {
|
|
background: linear-gradient(135deg, #6FCF97, var(--text-success));
|
|
width: var(--cs-indicator-md);
|
|
height: var(--cs-indicator-md);
|
|
}
|
|
|
|
.task-indicator.archived-tasks {
|
|
background: var(--text-faint);
|
|
width: var(--cs-indicator-md);
|
|
height: var(--cs-indicator-md);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Daily note indicators - distinctive purple */
|
|
.daily-note-indicator {
|
|
background-color: #9e74d0;
|
|
width: 7px;
|
|
height: 7px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Add hover information for indicators - scope to TaskNotes components */
|
|
.tasknotes-container [class$="-indicator"]:hover::after {
|
|
content: attr(aria-label);
|
|
position: absolute;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Minimalist calendar day content indicators with color */
|
|
.calendar-day.has-few-notes,
|
|
.calendar-day.has-some-notes,
|
|
.calendar-day.has-many-notes,
|
|
.calendar-day.has-tasks,
|
|
.calendar-day.has-completed-tasks,
|
|
.calendar-day.has-archived-tasks,
|
|
.calendar-day.has-daily-note {
|
|
font-weight: 500;
|
|
background-color: transparent;
|
|
border-top: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
/* Enhanced color indicators - stronger and more visible */
|
|
|
|
/* Notes heatmap - blue intensities with better contrast */
|
|
.calendar-day.has-few-notes {
|
|
border-left: 3px solid #7BA7E7;
|
|
background: linear-gradient(to right, rgba(123, 167, 231, 0.1), transparent);
|
|
}
|
|
|
|
.calendar-day.has-some-notes {
|
|
border-left: 3px solid #4E82E4;
|
|
background: linear-gradient(to right, rgba(78, 130, 228, 0.15), transparent);
|
|
}
|
|
|
|
.calendar-day.has-many-notes {
|
|
border-left: 3px solid #2D65D0;
|
|
background: linear-gradient(to right, rgba(45, 101, 208, 0.2), transparent);
|
|
}
|
|
|
|
/* Task indicators - stronger visual presence */
|
|
.calendar-day.has-tasks {
|
|
border-left: 3px solid var(--text-error);
|
|
background: linear-gradient(to right, rgba(255, 107, 107, 0.1), transparent);
|
|
}
|
|
|
|
.calendar-day.has-completed-tasks {
|
|
border-left: 3px solid var(--text-success);
|
|
background: linear-gradient(to right, rgba(111, 207, 151, 0.1), transparent);
|
|
}
|
|
|
|
.calendar-day.has-archived-tasks {
|
|
border-left: 3px solid var(--text-faint);
|
|
background: linear-gradient(to right, rgba(128, 128, 128, 0.05), transparent);
|
|
}
|
|
|
|
/* Daily note indicators - distinctive purple with gradient */
|
|
.calendar-day.has-daily-note {
|
|
border-left: 3px solid #9e74d0;
|
|
background: linear-gradient(to right, rgba(158, 116, 208, 0.1), transparent);
|
|
}
|
|
|
|
/* Enhanced hover effects */
|
|
.calendar-day.has-few-notes:hover,
|
|
.calendar-day.has-some-notes:hover,
|
|
.calendar-day.has-many-notes:hover,
|
|
.calendar-day.has-tasks:hover,
|
|
.calendar-day.has-completed-tasks:hover,
|
|
.calendar-day.has-archived-tasks:hover,
|
|
.calendar-day.has-daily-note:hover {
|
|
border-left-width: 4px;
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
/* Main Content Area with Tabs */
|
|
.tasknotes-main-content {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.tasknotes-tabs {
|
|
display: flex;
|
|
background-color: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-tab {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
font-size: 0.9rem;
|
|
color: var(--text-normal);
|
|
position: relative;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-tab:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-tab.active {
|
|
background-color: var(--background-primary);
|
|
color: var(--text-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tasknotes-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: var(--interactive-accent);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-content-area {
|
|
padding: 1rem;
|
|
background-color: var(--background-primary);
|
|
flex-grow: 1;
|
|
min-height: 300px;
|
|
overflow-y: auto;
|
|
transition: height 0.3s ease, padding 0.3s ease;
|
|
}
|
|
|
|
/* Task Filters */
|
|
.task-filters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
|
|
/* Toggle button for organization filters */
|
|
.toggle-org-filters-button {
|
|
padding: 0.25rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s ease;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.toggle-org-filters-button:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.toggle-org-filters-button svg {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* Toggle filters label */
|
|
.toggle-filters-label {
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
user-select: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.toggle-filters-label:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Spacer to push items to the right */
|
|
.filters-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Context Filter Dropdown */
|
|
.context-filter {
|
|
position: relative;
|
|
}
|
|
|
|
.context-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.context-dropdown-button {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 120px;
|
|
text-align: left;
|
|
position: relative;
|
|
}
|
|
|
|
.context-dropdown-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.context-dropdown-button::after {
|
|
content: '▼';
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 10px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.context-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 1000;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.context-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-sm);
|
|
transition: background-color var(--cs-transition-fast);
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.context-menu-item input[type="checkbox"] {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.context-menu-empty {
|
|
padding: 6px 12px;
|
|
color: var(--text-faint);
|
|
font-size: var(--cs-text-sm);
|
|
font-style: italic;
|
|
}
|
|
|
|
.add-task-button {
|
|
padding: 0.35rem 0.7rem;
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
|
|
}
|
|
|
|
.add-task-button:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.refresh-tasks-button {
|
|
padding: 0.15rem 0.4rem;
|
|
background-color: transparent;
|
|
color: var(--text-faint);
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: opacity 0.15s ease;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.refresh-tasks-button:hover {
|
|
background-color: transparent;
|
|
transform: none;
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Unified Card Styles - more compact and consistent */
|
|
.tasknotes-card {
|
|
padding: var(--cs-spacing-sm);
|
|
border-radius: var(--cs-radius-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-primary);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.tasknotes-card:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tasknotes-card-header {
|
|
font-weight: 500;
|
|
font-size: var(--cs-text-sm);
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-card-content {
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.tasknotes-card-footer {
|
|
margin-top: var(--cs-spacing-xs);
|
|
padding-top: var(--cs-spacing-xs);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Task List */
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Tasks container with denser card layout */
|
|
.tasks-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: var(--cs-spacing-xs);
|
|
padding: 0;
|
|
contain: layout style;
|
|
}
|
|
|
|
/* Task sections for due today and other tasks */
|
|
.task-section {
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.task-section-header {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
margin: var(--cs-spacing-xs) 0;
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-weight: 500;
|
|
font-size: var(--cs-text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.selected-date-tasks .task-section-header {
|
|
border-left: 1px solid var(--interactive-accent);
|
|
color: var(--interactive-accent);
|
|
opacity: 0.8;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
.recurring-tasks .task-section-header {
|
|
border-left: 1px solid var(--color-cyan);
|
|
color: var(--color-cyan);
|
|
opacity: 0.8;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
.task-item {
|
|
/* Extend base card with specific task item properties */
|
|
transition: all var(--cs-transition-normal);
|
|
margin-bottom: var(--cs-spacing-md);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--interactive-accent), var(--interactive-accent-hover));
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--cs-transition-normal);
|
|
}
|
|
|
|
/* Priority-based top borders */
|
|
.task-item.priority-high::before {
|
|
background: linear-gradient(90deg, var(--text-error), #ff5757);
|
|
}
|
|
|
|
.task-item.priority-normal::before {
|
|
background: linear-gradient(90deg, var(--interactive-accent), var(--interactive-accent-hover));
|
|
}
|
|
|
|
.task-item.priority-low::before {
|
|
background: linear-gradient(90deg, var(--text-muted), #999999);
|
|
}
|
|
|
|
.task-item:hover {
|
|
background-color: var(--background-primary);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
|
|
border-color: var(--background-modifier-border-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.task-item:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* Priority-based top border on hover - for custom priority colors */
|
|
.task-item[data-priority-color]:hover {
|
|
border-top: 3px solid var(--current-priority-color, var(--interactive-accent));
|
|
}
|
|
|
|
/* Task update animation */
|
|
.task-item.task-updated {
|
|
animation: taskUpdate 1.5s ease;
|
|
}
|
|
|
|
@keyframes taskUpdate {
|
|
0% {
|
|
background-color: var(--background-primary);
|
|
transform: scale(1);
|
|
}
|
|
20% {
|
|
background-color: var(--interactive-accent-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
background-color: var(--background-primary);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Task layout structure - cleaner */
|
|
.task-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* Header row with info and meta */
|
|
.task-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* Task info section */
|
|
.task-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
flex: 1;
|
|
cursor: pointer;
|
|
min-width: 0; /* Allow text overflow */
|
|
}
|
|
|
|
/* Task footer for due date and recurring controls */
|
|
.task-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
padding-top: var(--cs-spacing-sm);
|
|
margin-top: var(--cs-spacing-sm);
|
|
opacity: 0.8;
|
|
transition: opacity var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-item:hover .task-footer {
|
|
opacity: 1;
|
|
}
|
|
|
|
.due-date-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.due-date-section .task-status {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.due-date-label {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.recurring-section {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Task metadata display - more compact */
|
|
.task-item-metadata {
|
|
display: flex;
|
|
gap: var(--cs-spacing-xs);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-width: 4rem;
|
|
}
|
|
|
|
.task-control-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Style task control elements - back to normal sizing */
|
|
.task-status-select,
|
|
.task-priority-select,
|
|
.task-due-date-input {
|
|
font-size: var(--cs-text-xs);
|
|
padding: var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
line-height: 1.3;
|
|
transition: all var(--cs-transition-fast);
|
|
height: 24px;
|
|
}
|
|
|
|
.task-due-date-input {
|
|
max-width: 120px;
|
|
font-size: var(--cs-text-xs);
|
|
padding: 4px 8px;
|
|
border-radius: var(--cs-radius-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background-color: var(--background-secondary);
|
|
transition: all var(--cs-transition-fast);
|
|
height: 24px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-due-date-input:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
background-color: var(--background-primary);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.task-due-date-input:hover {
|
|
border-color: var(--interactive-accent-hover);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.task-status-select:focus,
|
|
.task-priority-select:focus,
|
|
.task-due-date-input:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.task-status-select:hover,
|
|
.task-priority-select:hover,
|
|
.task-due-date-input:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Archived task styling */
|
|
.task-item.task-archived {
|
|
opacity: 0.5;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.task-archived-badge {
|
|
font-size: 0.7rem;
|
|
padding: 1px 4px;
|
|
border-radius: var(--cs-radius-sm);
|
|
background-color: var(--text-faint);
|
|
color: var(--background-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Archive button styling */
|
|
.archive-button-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--cs-radius-sm);
|
|
background-color: transparent;
|
|
color: var(--text-faint);
|
|
padding: 2px;
|
|
text-align: center;
|
|
margin-left: var(--cs-spacing-xs);
|
|
border: none;
|
|
opacity: 0;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-item:hover .archive-button-icon {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.archive-button-icon:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.archive-button-icon.archived {
|
|
background-color: var(--text-faint);
|
|
color: var(--background-primary);
|
|
}
|
|
|
|
/* Task controls responsive layout */
|
|
@media (max-width: 768px) {
|
|
.task-controls {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.task-controls {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Touch-specific adjustments */
|
|
@media (pointer: coarse) {
|
|
/* Improvements for touch interfaces */
|
|
.calendar-day,
|
|
.tasknotes-tab,
|
|
.task-toggle-button,
|
|
.refresh-tasks-button,
|
|
.add-task-button,
|
|
.task-status-select,
|
|
.task-priority-select,
|
|
.task-due-date-input {
|
|
min-height: 44px; /* Minimum touch target size */
|
|
}
|
|
|
|
/* Increase spacing for touch targets */
|
|
.task-controls {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.calendar-grid {
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
/* Eliminate hover effects that can cause issues on touch */
|
|
.task-item:hover, .note-item:hover {
|
|
transform: none;
|
|
}
|
|
|
|
/* Add active state for touch feedback */
|
|
.task-item:active, .note-item:active,
|
|
.add-task-button:active, .refresh-tasks-button:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s;
|
|
}
|
|
}
|
|
|
|
/* Highlight tasks due on the selected date */
|
|
.task-item.task-due-today {
|
|
border-left: 3px solid var(--interactive-accent);
|
|
background: linear-gradient(to right, rgba(var(--interactive-accent-rgb), 0.05), transparent);
|
|
}
|
|
|
|
.task-item.task-due-today::before {
|
|
background: var(--interactive-accent);
|
|
}
|
|
|
|
/* Task title container with priority indicator */
|
|
.task-title-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.task-item-title {
|
|
font-weight: 500;
|
|
font-size: var(--cs-text-base);
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
flex: 1;
|
|
color: var(--text-normal);
|
|
transition: color var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-item:hover .task-item-title {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.task-item-due.due-today {
|
|
color: var(--interactive-accent);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.task-item-metadata {
|
|
display: flex;
|
|
gap: var(--cs-spacing-xs);
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-xs);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.task-completed-date {
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-xs);
|
|
padding: 2px 6px;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--cs-radius-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* Priority indicators - small colored badges */
|
|
.task-priority-indicator {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
transition: all var(--cs-transition-fast);
|
|
background-color: var(--priority-color, var(--text-muted));
|
|
}
|
|
|
|
.task-priority-indicator.clickable {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.task-priority-indicator.clickable {
|
|
position: relative;
|
|
}
|
|
|
|
.task-priority-indicator.clickable::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -4px;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
opacity: 0;
|
|
transition: opacity var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-priority-indicator.clickable:hover {
|
|
transform: scale(1.3);
|
|
box-shadow: 0 0 12px currentColor;
|
|
}
|
|
|
|
.task-priority-indicator.clickable:hover::after {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.task-priority-indicator.priority-high {
|
|
background: var(--text-error);
|
|
box-shadow: 0 0 4px rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.task-priority-indicator.priority-normal {
|
|
background: var(--interactive-accent);
|
|
box-shadow: 0 0 4px rgba(var(--interactive-accent-rgb), 0.3);
|
|
}
|
|
|
|
.task-priority-indicator.priority-low {
|
|
background: var(--text-muted);
|
|
box-shadow: 0 0 4px rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
/* Status badges - enhanced with gradients and glow effects */
|
|
.task-status {
|
|
padding: 3px 8px;
|
|
border-radius: var(--cs-radius-md);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
flex-shrink: 0;
|
|
color: white;
|
|
border: none;
|
|
line-height: 1.2;
|
|
transition: all var(--cs-transition-normal);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-status::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.task-status.clickable {
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.task-status.clickable:hover {
|
|
transform: translateY(-2px) scale(1.05);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
|
|
filter: brightness(1.15) saturate(1.1);
|
|
}
|
|
|
|
.task-status.clickable:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.task-status.clickable:active {
|
|
transform: translateY(-1px) scale(1.02);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.task-status-open {
|
|
background: linear-gradient(135deg, var(--text-error), #ff6b6b);
|
|
box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.task-status-open.clickable:hover {
|
|
box-shadow: 0 6px 12px rgba(255, 107, 107, 0.4);
|
|
}
|
|
|
|
.task-status-in-progress {
|
|
background: linear-gradient(135deg, var(--text-warning), #ffa726);
|
|
box-shadow: 0 2px 4px rgba(255, 167, 38, 0.3);
|
|
}
|
|
|
|
.task-status-in-progress.clickable:hover {
|
|
box-shadow: 0 6px 12px rgba(255, 167, 38, 0.4);
|
|
}
|
|
|
|
.task-status-done {
|
|
background: linear-gradient(135deg, var(--text-success), #66bb6a);
|
|
box-shadow: 0 2px 4px rgba(102, 187, 106, 0.3);
|
|
}
|
|
|
|
.task-status-done.clickable:hover {
|
|
box-shadow: 0 6px 12px rgba(102, 187, 106, 0.4);
|
|
}
|
|
|
|
/* Recurring task status styling */
|
|
.task-status.recurring-status {
|
|
background: var(--color-cyan);
|
|
color: white;
|
|
}
|
|
|
|
|
|
.task-overdue {
|
|
color: var(--text-error);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Recurring task styles */
|
|
.task-item.task-recurring {
|
|
border-left: 3px solid var(--color-cyan);
|
|
background: linear-gradient(to right, rgba(var(--color-cyan-rgb), 0.05), transparent);
|
|
}
|
|
|
|
.task-item.task-recurring::before {
|
|
background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-hover));
|
|
}
|
|
|
|
.task-recurring-icon {
|
|
color: var(--color-cyan);
|
|
font-weight: normal;
|
|
margin-right: 6px;
|
|
opacity: 0.9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.recurring-status {
|
|
border: none;
|
|
color: var(--color-cyan);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.task-toggle-button {
|
|
padding: 2px 8px;
|
|
border-radius: var(--cs-radius-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-xs);
|
|
margin: 0;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-toggle-button.mark-complete {
|
|
color: var(--text-muted);
|
|
border-color: var(--text-success);
|
|
}
|
|
|
|
.task-toggle-button.mark-complete:hover {
|
|
background: var(--text-success);
|
|
color: white;
|
|
}
|
|
|
|
.task-toggle-button.mark-incomplete {
|
|
color: var(--text-success);
|
|
background: var(--background-modifier-success);
|
|
}
|
|
|
|
.task-toggle-button.mark-incomplete:hover {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-toggle-button.processing,
|
|
.task-status-select:disabled,
|
|
.task-priority-select:disabled,
|
|
.task-due-date-input:disabled {
|
|
opacity: 0.7;
|
|
cursor: progress;
|
|
}
|
|
|
|
/* Task Creation Modal Improvements */
|
|
.task-creation-modal .input-with-counter {
|
|
position: relative;
|
|
}
|
|
|
|
.task-creation-modal .character-counter {
|
|
position: absolute;
|
|
top: -1.2rem;
|
|
right: 0;
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.task-creation-modal .character-counter.warning {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.task-creation-modal .autocomplete-container {
|
|
position: relative;
|
|
}
|
|
|
|
.task-creation-modal .autocomplete-input {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
}
|
|
|
|
.task-creation-modal .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(--cs-radius-sm) var(--cs-radius-sm);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.task-creation-modal .autocomplete-suggestion {
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-creation-modal .autocomplete-suggestion:hover,
|
|
.task-creation-modal .autocomplete-suggestion.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.task-creation-modal .autocomplete-suggestion:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.task-creation-modal .form-group {
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.task-creation-modal .form-group label {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.task-creation-modal input,
|
|
.task-creation-modal select,
|
|
.task-creation-modal textarea {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
transition: border-color var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-creation-modal input:focus,
|
|
.task-creation-modal select:focus,
|
|
.task-creation-modal textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.task-creation-modal .button-container {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: flex-end;
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.task-creation-modal .create-button {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--cs-radius-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-creation-modal .create-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.task-creation-modal .recurrence-helper-text {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.task-creation-modal .days-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.task-creation-modal .day-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.task-creation-modal .day-checkbox {
|
|
width: auto !important;
|
|
margin: 0;
|
|
}
|
|
|
|
.task-creation-modal .time-estimate-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-creation-modal .time-estimate-container input {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-creation-modal .time-unit-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Compact Time Tracking in Metadata */
|
|
.time-meta-compact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.time-meta-estimate {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
padding: 1px 4px;
|
|
background: var(--background-modifier-form-field);
|
|
border-radius: var(--cs-radius-sm);
|
|
}
|
|
|
|
.time-meta-spent {
|
|
color: var(--text-accent);
|
|
font-weight: 500;
|
|
padding: 1px 4px;
|
|
background: var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
}
|
|
|
|
.progress-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.progress-dot.in-progress {
|
|
background: var(--interactive-accent);
|
|
}
|
|
|
|
.progress-dot.complete {
|
|
background: var(--text-success);
|
|
}
|
|
|
|
.progress-dot.over-estimate {
|
|
background: var(--text-error);
|
|
}
|
|
|
|
/* Simple Time Icon */
|
|
.time-icon {
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
margin-right: 6px;
|
|
transition: all var(--cs-transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.time-icon.idle {
|
|
color: var(--text-muted);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.time-icon.idle:hover {
|
|
color: var(--interactive-accent);
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.time-icon.tracking {
|
|
color: var(--text-error);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.time-icon.tracking:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Unified Button Styles */
|
|
.tasknotes-button {
|
|
padding: 0.35rem 0.7rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
border: none;
|
|
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
|
|
}
|
|
|
|
.tasknotes-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tasknotes-button:active {
|
|
transform: translateY(0);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-button-primary {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-button-primary:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.tasknotes-button-secondary {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-button-secondary:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.tasknotes-button-small {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.tasknotes-button-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Style for the refresh button */
|
|
.refresh-tasks-button {
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
margin-right: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Task Creation Modal */
|
|
.task-creation-modal {
|
|
min-width: 500px;
|
|
}
|
|
|
|
/* Recurrence options styling */
|
|
.recurrence-options {
|
|
margin-top: 0.5rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--background-secondary-alt);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Days of week selection */
|
|
.days-of-week-title {
|
|
margin-top: 0;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-normal);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.days-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.day-row {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.day-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.day-checkbox {
|
|
margin-right: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.recurrence-helper-text {
|
|
font-size: 0.85rem;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
margin-top: 0.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
margin-bottom: 0.25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.create-button {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Notes List */
|
|
.notes-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.notes-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.refresh-notes-button {
|
|
background-color: transparent;
|
|
color: var(--text-faint);
|
|
border: none;
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.refresh-notes-button:hover {
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.notes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
will-change: transform; /* Hardware acceleration hint */
|
|
contain: content; /* Better performance for large lists */
|
|
}
|
|
|
|
.notes-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: var(--cs-spacing-xs);
|
|
padding: 0;
|
|
contain: layout style;
|
|
}
|
|
|
|
.note-item {
|
|
/* Extend base card with specific note card properties */
|
|
transform: translateZ(0); /* Hardware acceleration */
|
|
height: auto;
|
|
min-height: fit-content;
|
|
}
|
|
|
|
.note-item:hover {
|
|
background-color: var(--background-primary-alt);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.note-item-title {
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.note-item-date {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
margin-top: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.note-item-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--cs-spacing-xs);
|
|
margin-top: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.note-tag {
|
|
font-size: var(--cs-text-xs);
|
|
padding: 1px var(--cs-spacing-xs);
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--cs-radius-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Daily note styling */
|
|
.daily-note-item {
|
|
border-left: 3px solid #9e74d0;
|
|
}
|
|
|
|
.daily-note-badge {
|
|
background: #9e74d0;
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Timeblock Editor */
|
|
.timeblock-edit-input {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0.25rem;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
border-bottom: 1px dashed var(--interactive-accent);
|
|
}
|
|
.timeblock-editor {
|
|
width: 100%;
|
|
}
|
|
|
|
.timeblock-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.timeblock-table td,
|
|
.timeblock-table th {
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.timeblock-time {
|
|
font-weight: bold;
|
|
width: 100px;
|
|
}
|
|
|
|
.timeblock-activity {
|
|
cursor: text;
|
|
}
|
|
|
|
.timeblock-activity:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.generate-timeblock-button, .create-note-button {
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Week View */
|
|
.week-view-container {
|
|
margin-bottom: 1rem;
|
|
overflow-y: auto;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.week-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.week-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
background-color: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.week-day-header {
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-right: 1px solid var(--background-modifier-border);
|
|
position: relative;
|
|
}
|
|
|
|
.week-day-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.week-day-header.today {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.week-day-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.week-day-date {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.week-time-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.week-time-row {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.week-time-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.week-time-label {
|
|
padding: 0.25rem 0.5rem;
|
|
width: 60px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
font-weight: bold;
|
|
text-align: right;
|
|
border-right: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.week-time-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.week-time-cell {
|
|
padding: 0.25rem;
|
|
border-right: 1px solid var(--background-modifier-border);
|
|
min-height: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.week-time-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.week-time-cell:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.week-time-cell.current-time {
|
|
background-color: rgba(var(--interactive-accent-rgb), 0.1);
|
|
}
|
|
|
|
/* State Change Animation */
|
|
@keyframes highlight-update {
|
|
0% { background-color: rgba(var(--interactive-accent-rgb), 0.15); }
|
|
100% { background-color: transparent; }
|
|
}
|
|
|
|
.task-updated {
|
|
animation: highlight-update 1.5s ease-out;
|
|
}
|
|
|
|
.note-updated {
|
|
animation: highlight-update 1.5s ease-out;
|
|
}
|
|
|
|
/* Button Loading States */
|
|
.button-with-loader {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button-with-loader.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(var(--background-modifier-border-rgb), 0.2);
|
|
backdrop-filter: blur(1px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.button-with-loader.loading::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
top: calc(50% - 8px);
|
|
left: calc(50% - 8px);
|
|
border: 2px solid var(--interactive-accent);
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
z-index: 11;
|
|
animation: spinner 0.8s linear infinite;
|
|
}
|
|
|
|
/* Task Toggle Button State Feedback */
|
|
.task-toggle-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-toggle-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: rgba(var(--interactive-accent-rgb), 0.5);
|
|
opacity: 0;
|
|
border-radius: 100%;
|
|
transform: scale(1, 1) translate(-50%, -50%);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.task-toggle-button:active::after {
|
|
opacity: 1;
|
|
transform: scale(30, 30) translate(-50%, -50%);
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
/* Loading indicators */
|
|
.cache-loading-indicator {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.5rem;
|
|
background-color: var(--background-modifier-success);
|
|
color: var(--text-on-accent);
|
|
text-align: center;
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
border-radius: 0 0 4px 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
animation: fadeIn 0.4s ease-in-out;
|
|
}
|
|
|
|
.loading-indicator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--background-modifier-border);
|
|
border-top: 3px solid var(--interactive-accent);
|
|
border-radius: 50%;
|
|
animation: spinner 0.8s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.loading-text {
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* Processing state for elements */
|
|
.processing {
|
|
position: relative;
|
|
}
|
|
|
|
.processing::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(var(--background-modifier-border-rgb), 0.2);
|
|
backdrop-filter: blur(1px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.processing::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc(50% - 10px);
|
|
left: calc(50% - 10px);
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--interactive-accent);
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
z-index: 11;
|
|
animation: spinner 0.8s linear infinite;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-100%); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; transform: translateY(0); }
|
|
to { opacity: 0; transform: translateY(-100%); }
|
|
}
|
|
|
|
@keyframes spinner {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
/* Status Messages */
|
|
.tasknotes-status-message {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
max-width: 300px;
|
|
animation: slideInRight 0.3s ease, fadeOut 0.3s ease 3s forwards;
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.status-message-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-status-success {
|
|
background-color: var(--background-modifier-success);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-status-error {
|
|
background-color: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-status-warning {
|
|
background-color: var(--background-modifier-error-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
/* Responsive adjustments - maintaining compact design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-container {
|
|
padding: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.calendar-nav {
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.month-navigation-group {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.today-button {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-grid {
|
|
gap: 1px;
|
|
}
|
|
|
|
.calendar-day-header {
|
|
padding: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.calendar-day {
|
|
min-height: 28px;
|
|
padding: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.colorize-mode-container {
|
|
margin-top: var(--cs-spacing-xs);
|
|
width: 100%;
|
|
}
|
|
|
|
.colorize-mode-select {
|
|
width: 100%;
|
|
min-height: 32px;
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.tasknotes-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-tab {
|
|
padding: var(--cs-spacing-sm);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.task-creation-modal {
|
|
min-width: 280px;
|
|
}
|
|
|
|
.task-item, .note-item {
|
|
padding: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.task-controls {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.task-status-select,
|
|
.task-priority-select,
|
|
.task-due-date-input {
|
|
min-height: 32px;
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.task-item-metadata {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.notes-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.tasks-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
}
|
|
|
|
/* Extra small screens - maintaining information density */
|
|
@media (max-width: 480px) {
|
|
.task-filters {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.filters-left-group, .filters-right-group {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.task-section-header {
|
|
font-size: var(--cs-text-xs);
|
|
padding: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.task-item-title {
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.add-task-button, .refresh-tasks-button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
|
|
.notes-container, .tasks-container {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.calendar-day {
|
|
min-height: 24px;
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
}
|
|
|
|
/* Task update animation - improved subtle highlight */
|
|
.task-updated {
|
|
animation: highlight-fade 1.5s ease-out;
|
|
}
|
|
|
|
@keyframes highlight-fade {
|
|
from {
|
|
background-color: rgba(var(--interactive-accent-rgb), 0.2);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.3);
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
box-shadow: 0 0 0 0px rgba(var(--interactive-accent-rgb), 0);
|
|
}
|
|
}
|
|
|
|
/* Calendar View Switcher */
|
|
.view-switcher-container {
|
|
display: flex;
|
|
gap: var(--cs-spacing-xs);
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
.view-switcher-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border-radius: var(--cs-radius-sm);
|
|
cursor: pointer;
|
|
transition: var(--cs-transition-fast);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.view-switcher-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.view-switcher-button.active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
|
|
.event-block {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 2px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: var(--cs-text-xs);
|
|
cursor: pointer;
|
|
transition: var(--cs-transition-fast);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.event-block:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.event-block.task-event {
|
|
background: var(--text-error);
|
|
}
|
|
|
|
.event-block.note-event {
|
|
background: var(--text-success);
|
|
}
|
|
|
|
/* Agenda List View */
|
|
.agenda-list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-lg);
|
|
padding: var(--cs-spacing-md);
|
|
}
|
|
|
|
.agenda-day-header {
|
|
font-size: var(--cs-text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: var(--cs-spacing-xs);
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* agenda-item-list styling defined later in file */
|
|
|
|
|
|
.item-title {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
}
|
|
|
|
.item-meta {
|
|
display: flex;
|
|
gap: var(--cs-spacing-xs);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item-type {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Settings tab styling */
|
|
.settings-tab-nav {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.settings-tab-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.settings-tab-button.active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.settings-tab-button:hover:not(.active) {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.settings-tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.settings-tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Settings warning box */
|
|
.settings-warning {
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
background-color: var(--background-modifier-warning);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-orange);
|
|
}
|
|
|
|
/* Settings table */
|
|
.settings-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.settings-table td {
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.settings-table input {
|
|
width: 100%;
|
|
padding: 4px;
|
|
}
|
|
|
|
/* Status/Priority lists */
|
|
.settings-list {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.settings-item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.settings-color-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
background-color: var(--indicator-color, var(--text-muted));
|
|
}
|
|
|
|
.settings-input {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.settings-input.value-input {
|
|
width: 120px;
|
|
}
|
|
|
|
.settings-input.label-input {
|
|
width: 120px;
|
|
}
|
|
|
|
.settings-input.color-input {
|
|
width: 40px;
|
|
}
|
|
|
|
.settings-input.weight-input {
|
|
width: 80px;
|
|
}
|
|
|
|
.settings-checkbox-label {
|
|
margin-right: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-checkbox-label input {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.settings-delete-button {
|
|
margin-left: auto;
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.settings-delete-button:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.priority-badge {
|
|
font-size: var(--cs-text-xs);
|
|
padding: 1px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.priority-badge.priority-high {
|
|
background: var(--text-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.priority-badge.priority-low {
|
|
background: var(--text-muted);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.context-tag,
|
|
.note-tag,
|
|
.due-date,
|
|
.completed-date {
|
|
font-size: var(--cs-text-xs);
|
|
padding: 1px var(--cs-spacing-xs);
|
|
background: var(--background-modifier-form-field);
|
|
border-radius: var(--cs-radius-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.due-date {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.completed-date {
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.time-estimate-agenda,
|
|
.time-spent-agenda {
|
|
font-size: var(--cs-text-xs);
|
|
padding: 1px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time-estimate-agenda {
|
|
background: var(--background-modifier-form-field);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-spent-agenda {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.empty-agenda-message {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: var(--cs-spacing-xl);
|
|
}
|
|
|
|
/* Task View Filter Layout Improvements */
|
|
.task-filters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
margin-bottom: var(--cs-spacing-md);
|
|
padding: var(--cs-spacing-md);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
}
|
|
|
|
/* DEPRECATED: Replaced by unified FilterBar system */
|
|
/*
|
|
.filters-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.primary-filters {
|
|
padding-bottom: var(--cs-spacing-sm);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.organization-filters {
|
|
padding-top: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-group span {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-group select {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.filter-group select:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
*/
|
|
|
|
.refresh-tasks-button {
|
|
margin-left: auto;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
/* Context dropdown improvements */
|
|
.context-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.context-dropdown-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
cursor: pointer;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.context-dropdown-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.context-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
box-shadow: var(--shadow-s);
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* DEPRECATED: Responsive adjustments for old filter system */
|
|
/*
|
|
@media (max-width: 768px) {
|
|
.filters-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.filter-group {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.filter-group select,
|
|
.context-dropdown-button {
|
|
min-width: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.refresh-tasks-button {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* Agenda View Styles */
|
|
.agenda-view-container {
|
|
padding: 16px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Navigation Row Layout */
|
|
.navigation-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.current-period-display {
|
|
font-weight: 600;
|
|
font-size: 1.0em;
|
|
min-width: 140px;
|
|
text-align: center;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Options Row Layout */
|
|
.options-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.period-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toggle-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Due Date Modal Styling */
|
|
.task-title-display {
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
border-left: 3px solid var(--interactive-accent);
|
|
}
|
|
|
|
.quick-dates-container {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.quick-dates-container h4 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 0.9em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.quick-date-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.quick-date-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.quick-date-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.quick-date-btn.clear-btn {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.quick-date-btn.clear-btn:hover {
|
|
background: var(--background-modifier-error-hover);
|
|
}
|
|
|
|
.modal-button-container {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.error-message {
|
|
color: var(--text-error);
|
|
background: var(--background-modifier-error);
|
|
padding: 8px 12px;
|
|
border-radius: var(--radius-s);
|
|
margin-top: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Empty message styling */
|
|
.empty-agenda-message {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-agenda-message p {
|
|
margin: 0 0 8px 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.empty-agenda-message .empty-tip {
|
|
margin: 0;
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.empty-agenda-message .empty-tip span {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.agenda-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-md);
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
/* Header section - styled like tasks view date header */
|
|
.agenda-header-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--cs-spacing-sm) 0;
|
|
}
|
|
|
|
.agenda-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.agenda-period-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
margin: 0 var(--cs-spacing-sm);
|
|
}
|
|
|
|
.agenda-header-content .nav-arrow-button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
padding: var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.agenda-header-content .nav-arrow-button:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Filter bar section - matches tasks view */
|
|
.agenda-filter-bar-container {
|
|
/* Inherits styling from existing filter-bar styles */
|
|
}
|
|
|
|
/* Settings section */
|
|
.agenda-settings-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--cs-spacing-md);
|
|
padding: var(--cs-spacing-sm) 0;
|
|
}
|
|
|
|
.agenda-left-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.agenda-period-select {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 100px;
|
|
}
|
|
|
|
.agenda-today-button {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.agenda-today-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.agenda-right-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
}
|
|
|
|
.agenda-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.agenda-toggle-checkbox {
|
|
margin: 0;
|
|
}
|
|
|
|
.agenda-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.time-navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.period-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.period-label {
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.period-select {
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.toggle-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 0.9em;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.toggle-checkbox {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.current-period-display {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
text-align: center;
|
|
}
|
|
|
|
.agenda-content {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* Task and note card spacing in agenda view */
|
|
.agenda-content .task-card,
|
|
.agenda-content .note-card {
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.agenda-content .task-card:last-child,
|
|
.agenda-content .note-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.agenda-day-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 0 8px 0;
|
|
margin: 24px 0 16px 0;
|
|
border-bottom: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.agenda-day-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.day-header-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.day-name {
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.today-badge {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.day-date {
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.item-count-badge {
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.agenda-item-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Note cards now use proper height constraints globally */
|
|
|
|
.task-checkbox {
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.note-icon {
|
|
flex-shrink: 0;
|
|
font-size: 1.1em;
|
|
margin-top: 1px;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.item-title {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.item-title.completed,
|
|
.item-title.task-completed {
|
|
text-decoration: line-through;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.item-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.item-type {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.due-date {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.due-date.due-today {
|
|
color: var(--text-error);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.priority-badge {
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
font-size: 0.75em;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.priority-badge.priority-high {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.priority-badge.priority-low {
|
|
background: rgba(128, 128, 128, 0.2);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.context-tag {
|
|
color: var(--text-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.note-tag {
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-border);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.more-tags {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.time-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-info.over-estimate {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.time-spent,
|
|
.time-estimate {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.time-separator {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-agenda-message {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-agenda-message p {
|
|
margin: 6px 0;
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
.empty-tip {
|
|
font-size: 0.85em;
|
|
margin-top: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Flat list uses same card styling as grouped view */
|
|
|
|
/* Task status styling handled by task-card component */
|
|
|
|
/* Pomodoro View Styles */
|
|
.pomodoro-view-container {
|
|
padding: var(--cs-spacing-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.pomodoro-header {
|
|
text-align: center;
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-header h2 {
|
|
font-size: var(--cs-text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.pomodoro-timer-section {
|
|
text-align: center;
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
|
|
.pomodoro-status {
|
|
font-size: var(--cs-text-md);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
border-radius: var(--cs-radius-lg);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.pomodoro-status-work {
|
|
color: var(--text-error);
|
|
background: rgba(var(--color-red-rgb), 0.1);
|
|
}
|
|
|
|
.pomodoro-status-short-break {
|
|
color: var(--text-accent);
|
|
background: rgba(var(--color-blue-rgb), 0.1);
|
|
}
|
|
|
|
.pomodoro-status-long-break {
|
|
color: var(--text-success);
|
|
background: rgba(var(--color-green-rgb), 0.1);
|
|
}
|
|
|
|
.pomodoro-task-display {
|
|
margin-bottom: var(--cs-spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.pomodoro-current-task {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-task-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.pomodoro-task-title {
|
|
font-size: var(--cs-text-md);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.pomodoro-controls {
|
|
display: flex;
|
|
gap: var(--cs-spacing-md);
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-button {
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-lg);
|
|
border: none;
|
|
border-radius: var(--cs-radius-md);
|
|
font-size: var(--cs-text-md);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
min-width: 100px;
|
|
}
|
|
|
|
.pomodoro-start-button {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.pomodoro-start-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
.pomodoro-pause-button {
|
|
background: var(--background-modifier-warning);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.pomodoro-pause-button:hover {
|
|
background: var(--background-modifier-warning-hover);
|
|
}
|
|
|
|
.pomodoro-stop-button {
|
|
background: var(--background-modifier-error);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.pomodoro-stop-button:hover {
|
|
background: var(--background-modifier-error-hover);
|
|
}
|
|
|
|
.pomodoro-quick-actions {
|
|
display: flex;
|
|
gap: var(--cs-spacing-sm);
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-quick-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-quick-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.pomodoro-stats-section {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin-top: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-stats-section h3 {
|
|
font-size: var(--cs-text-md);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
text-align: center;
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
.pomodoro-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--cs-spacing-md);
|
|
}
|
|
|
|
.pomodoro-stat {
|
|
text-align: center;
|
|
padding: var(--cs-spacing-md);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--cs-radius-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.pomodoro-stat-value {
|
|
display: block;
|
|
font-size: var(--cs-text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-stat-label {
|
|
display: block;
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
|
|
/* Pomodoro task selector */
|
|
.pomodoro-task-selector {
|
|
margin-bottom: var(--cs-spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.pomodoro-task-selector label {
|
|
display: block;
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-task-select {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
/* Enhanced Pomodoro Visual Styles */
|
|
.pomodoro-progress-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--cs-spacing-lg);
|
|
}
|
|
|
|
.pomodoro-progress-svg {
|
|
transform: rotate(-90deg);
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.pomodoro-progress-circle {
|
|
transition: stroke-dashoffset 0.3s ease, stroke 0.2s ease;
|
|
will-change: stroke-dashoffset;
|
|
}
|
|
|
|
.pomodoro-progress-work {
|
|
stroke: #e74c3c;
|
|
}
|
|
|
|
.pomodoro-progress-short-break {
|
|
stroke: #3498db;
|
|
}
|
|
|
|
.pomodoro-progress-long-break {
|
|
stroke: #2ecc71;
|
|
}
|
|
|
|
.pomodoro-progress-warning {
|
|
animation: pomodoro-pulse 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes pomodoro-pulse {
|
|
from {
|
|
stroke-opacity: 0.7;
|
|
}
|
|
to {
|
|
stroke-opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pomodoro-timer-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pomodoro-session-badge {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-lg);
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
font-size: var(--cs-text-xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-session-text {
|
|
display: block;
|
|
}
|
|
|
|
.pomodoro-badge-work {
|
|
background: rgba(231, 76, 60, 0.1);
|
|
border-color: rgba(231, 76, 60, 0.3);
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.pomodoro-badge-short-break {
|
|
background: rgba(52, 152, 219, 0.1);
|
|
border-color: rgba(52, 152, 219, 0.3);
|
|
color: #3498db;
|
|
}
|
|
|
|
.pomodoro-badge-long-break {
|
|
background: rgba(46, 204, 113, 0.1);
|
|
border-color: rgba(46, 204, 113, 0.3);
|
|
color: #2ecc71;
|
|
}
|
|
|
|
.pomodoro-badge-ready {
|
|
background: var(--background-secondary);
|
|
border-color: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Enhanced timer display */
|
|
.pomodoro-timer-display {
|
|
font-size: 3.5rem;
|
|
font-weight: 300;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.02em;
|
|
color: var(--text-normal);
|
|
text-align: center;
|
|
line-height: 1;
|
|
transition: color var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-timer-warning {
|
|
color: #e74c3c;
|
|
animation: pomodoro-timer-pulse 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes pomodoro-timer-pulse {
|
|
from {
|
|
opacity: 0.8;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Enhanced status display */
|
|
.pomodoro-status-paused {
|
|
color: #f39c12;
|
|
background: rgba(243, 156, 18, 0.1);
|
|
}
|
|
|
|
/* ================================================
|
|
MINIMALIST UNIFIED TASK CARD
|
|
================================================ */
|
|
|
|
.task-card {
|
|
/* Extend base card with specific task card properties */
|
|
border-left: 3px solid var(--priority-color, var(--text-muted));
|
|
/* Ensure core properties are inherited from base classes */
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-sm);
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
font-size: var(--cs-text-base);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.task-card:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.task-card.task-completed .task-title {
|
|
color: var(--text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.task-card.archived {
|
|
opacity: 0.6;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
/* Task checkbox */
|
|
.task-card .task-checkbox {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
margin-top: 2px; /* Align with first line of text */
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Status indicator dot */
|
|
.task-card .status-dot {
|
|
flex-shrink: 0;
|
|
width: var(--cs-indicator-sm);
|
|
height: var(--cs-indicator-sm);
|
|
border-radius: 50%;
|
|
background: var(--text-muted);
|
|
transition: background-color var(--cs-transition-fast);
|
|
margin-top: 3px; /* Better alignment with first line of text */
|
|
}
|
|
|
|
/* Task content container */
|
|
.task-card .task-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
/* Task title */
|
|
.task-card .task-title {
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
transition: color var(--cs-transition-fast);
|
|
word-break: break-word;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Task metadata line */
|
|
.task-card .task-metadata-line {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Recurring task styles */
|
|
.task-card.recurring-task {
|
|
border-left: 3px solid var(--priority-color, var(--interactive-accent));
|
|
background: linear-gradient(135deg, var(--background-primary) 95%, var(--interactive-accent-hover) 100%);
|
|
}
|
|
|
|
.task-card.recurring-task:hover {
|
|
background: linear-gradient(135deg, var(--background-modifier-hover) 95%, var(--interactive-accent-hover) 100%);
|
|
}
|
|
|
|
/* Recurring indicator */
|
|
.task-card .recurring-indicator {
|
|
flex-shrink: 0;
|
|
width: var(--cs-indicator-md);
|
|
height: var(--cs-indicator-md);
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
border: 2px solid var(--background-primary);
|
|
margin-top: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.task-card .recurring-indicator::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 2px;
|
|
height: 2px;
|
|
background: var(--background-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Update animation */
|
|
.task-card.task-updated {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
animation: task-update-pulse 1s ease;
|
|
}
|
|
|
|
@keyframes task-update-pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.task-card {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
min-height: calc(var(--cs-touch-target) + var(--cs-spacing-xs));
|
|
}
|
|
|
|
.task-card .task-title {
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.task-card .metadata-icon {
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
TASK EDIT MODAL
|
|
================================================ */
|
|
|
|
.task-edit-modal {
|
|
max-width: 500px;
|
|
width: 90vw;
|
|
min-width: 400px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.task-edit-modal * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Hide the close button */
|
|
.task-edit-modal .modal-close-button {
|
|
display: none !important;
|
|
}
|
|
|
|
.task-edit-modal .modal-content {
|
|
padding: var(--cs-spacing-sm);
|
|
box-sizing: border-box;
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.task-edit-modal h2 {
|
|
margin-bottom: var(--cs-spacing-lg);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-larger);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-edit-modal .form-group {
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
.task-edit-modal .form-group label {
|
|
display: block;
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-edit-modal .form-group input:not([type="checkbox"]),
|
|
.task-edit-modal .form-group select,
|
|
.task-edit-modal .form-group textarea {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
box-sizing: border-box;
|
|
transition: border-color var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-edit-modal .form-group input:focus,
|
|
.task-edit-modal .form-group select:focus,
|
|
.task-edit-modal .form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.task-edit-modal .input-with-counter {
|
|
position: relative;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-edit-modal .character-counter {
|
|
position: absolute;
|
|
right: var(--cs-spacing-xs);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.task-edit-modal .input-with-counter input {
|
|
padding-right: 60px !important;
|
|
}
|
|
|
|
.task-edit-modal .character-counter.warning {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.task-edit-modal .time-estimate-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-edit-modal .time-estimate-container input {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-edit-modal .time-unit-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-edit-modal .recurrence-options {
|
|
margin-top: var(--cs-spacing-md);
|
|
padding: var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-secondary);
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.task-edit-modal .recurrence-options.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.task-edit-modal .recurrence-helper-text {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.task-edit-modal .days-of-week-title {
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
font-size: var(--cs-text-base);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-edit-modal .days-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.task-edit-modal .day-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-edit-modal .day-checkbox-label {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 0.5rem !important;
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-sm) !important;
|
|
color: var(--text-normal) !important;
|
|
margin: 0 !important;
|
|
padding: 0.25rem 0 !important;
|
|
}
|
|
|
|
.task-edit-modal .day-checkbox {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
margin: 0 !important;
|
|
margin-right: 0 !important;
|
|
flex-shrink: 0 !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.task-edit-modal .button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--cs-spacing-sm);
|
|
margin-top: var(--cs-spacing-lg);
|
|
padding-top: var(--cs-spacing-md);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.task-edit-modal button {
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.task-edit-modal button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.task-edit-modal .create-button {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.task-edit-modal .create-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
|
|
/* Modal footer with metadata and buttons */
|
|
.task-edit-modal .modal-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: var(--cs-spacing-lg);
|
|
padding-top: var(--cs-spacing-md);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.task-edit-modal .metadata-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.task-edit-modal .metadata-item {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
|
|
.task-edit-modal .secondary-button {
|
|
background: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.task-edit-modal .secondary-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Autocomplete styling for task edit modal */
|
|
.task-edit-modal .autocomplete-container {
|
|
position: relative;
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-input {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-base);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.task-edit-modal .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(--cs-radius-md) var(--cs-radius-md);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-suggestions.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-suggestion {
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--background-modifier-border-hover);
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-suggestion:hover,
|
|
.task-edit-modal .autocomplete-suggestion.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.task-edit-modal .autocomplete-suggestion:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Responsive layout for smaller screens */
|
|
@media (max-width: 480px) {
|
|
|
|
.task-edit-modal .modal-footer {
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-md);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.task-edit-modal .metadata-info {
|
|
text-align: center;
|
|
order: 2;
|
|
}
|
|
|
|
.task-edit-modal .button-container {
|
|
order: 1;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
KANBAN BOARD STYLES
|
|
======================================== */
|
|
|
|
.kanban-view {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kanban-header {
|
|
background: var(--background-primary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding: var(--cs-spacing-lg) var(--cs-spacing-md);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Header top row - Board selector and actions */
|
|
.kanban-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
.kanban-board-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
}
|
|
|
|
.kanban-board-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-board-title {
|
|
font-size: var(--cs-text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin: 0;
|
|
}
|
|
|
|
.kanban-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* Header bottom row - Filters */
|
|
.kanban-filters {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-lg);
|
|
flex-wrap: wrap;
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--cs-radius-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.kanban-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.kanban-select {
|
|
min-width: 120px;
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.kanban-select:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px var(--interactive-accent-transparent);
|
|
}
|
|
|
|
.kanban-select:hover {
|
|
border-color: var(--interactive-hover);
|
|
}
|
|
|
|
/* Enhanced buttons */
|
|
.kanban-config-button,
|
|
.kanban-refresh-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.kanban-button-icon {
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.kanban-config-button:hover,
|
|
.kanban-refresh-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--interactive-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.kanban-config-button:active,
|
|
.kanban-refresh-button:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Enhanced checkbox styling */
|
|
.kanban-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
cursor: pointer;
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border-radius: var(--cs-radius-sm);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.kanban-checkbox-label:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.kanban-checkbox-label input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Board selector dropdown enhancement */
|
|
.kanban-board-selector .kanban-select {
|
|
min-width: 200px;
|
|
font-weight: 500;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Filter section styling */
|
|
.kanban-filters-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
}
|
|
|
|
.kanban-filters-toggle {
|
|
font-size: var(--cs-text-xs);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.kanban-filters-toggle:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.kanban-board-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.kanban-board {
|
|
display: flex;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
padding: var(--cs-spacing-md);
|
|
gap: var(--cs-spacing-md);
|
|
min-height: 0;
|
|
}
|
|
|
|
.kanban-column {
|
|
min-width: 280px;
|
|
max-width: 350px;
|
|
flex-shrink: 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
max-height: calc(100vh - 200px);
|
|
}
|
|
|
|
.kanban-column.is-dragover {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px var(--interactive-accent-transparent);
|
|
}
|
|
|
|
.kanban-column-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: var(--cs-spacing-sm) var(--cs-spacing-md);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0;
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.kanban-column-title {
|
|
font-weight: 600;
|
|
font-size: var(--cs-text-md);
|
|
color: var(--text-normal);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.kanban-column-count {
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-xs);
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kanban-column-body {
|
|
padding: var(--cs-spacing-sm);
|
|
min-height: 100px;
|
|
max-height: calc(100vh - 300px);
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.kanban-column-body.is-dragover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Task card styles in Kanban */
|
|
.kanban-column-body .task-card {
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
transition: transform var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
|
|
}
|
|
|
|
.kanban-column-body .task-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.kanban-column-body .task-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.kanban-column-body .task-card.is-dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(5deg);
|
|
cursor: grabbing;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Animation for task cards moving between columns */
|
|
.kanban-column-body .task-card {
|
|
transition: transform var(--cs-transition-normal), opacity var(--cs-transition-normal);
|
|
}
|
|
|
|
/* Better visual feedback for drop zones */
|
|
.kanban-column-body.is-dragover::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--interactive-accent-transparent);
|
|
border: 2px dashed var(--interactive-accent);
|
|
border-radius: var(--cs-radius-md);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Scrollbar styling for Kanban columns */
|
|
.kanban-column-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.kanban-column-body::-webkit-scrollbar-track {
|
|
background: var(--background-secondary);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.kanban-column-body::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.kanban-column-body::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Horizontal scroll for board */
|
|
.kanban-board::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-track {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-thumb {
|
|
background: var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Responsive design for smaller screens */
|
|
@media (max-width: 768px) {
|
|
.kanban-header {
|
|
padding: var(--cs-spacing-md) var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-header-top {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.kanban-filters {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--cs-spacing-sm);
|
|
padding: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-filter {
|
|
width: 100%;
|
|
}
|
|
|
|
.kanban-select {
|
|
min-width: auto;
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.kanban-column {
|
|
min-width: 240px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.kanban-board {
|
|
padding: var(--cs-spacing-sm);
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-config-button,
|
|
.kanban-refresh-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
font-size: var(--cs-text-xs);
|
|
}
|
|
}
|
|
|
|
/* Enhanced Kanban Features */
|
|
.kanban-empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
background: var(--background-secondary);
|
|
border: 2px dashed var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Board meta information */
|
|
.kanban-board-meta {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.board-meta-item {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-form-field);
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* Enhanced filters and stats */
|
|
.kanban-filter-controls {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.kanban-stats {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.board-stats {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-item {
|
|
font-size: 0.8em;
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-secondary);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stat-item.total {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-item.completed {
|
|
background: var(--color-green);
|
|
color: white;
|
|
}
|
|
|
|
.stat-item.archived {
|
|
background: var(--background-modifier-border);
|
|
}
|
|
|
|
.stat-item.percentage {
|
|
background: var(--color-blue);
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Enhanced column styling */
|
|
.column-title-container {
|
|
flex: 1;
|
|
}
|
|
|
|
.column-count-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.kanban-column-count.total {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
font-size: 0.7em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kanban-column-count.completed {
|
|
background: var(--color-green);
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
/* Discovered column styling */
|
|
.kanban-column.discovered-column {
|
|
border: 2px dashed var(--color-orange);
|
|
background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
|
|
}
|
|
|
|
.kanban-column.discovered-column .kanban-column-header {
|
|
background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, var(--background-modifier-hover) 100%);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.kanban-column.uncategorized-column {
|
|
opacity: 0.8;
|
|
border: 1px dashed var(--text-muted);
|
|
}
|
|
|
|
.kanban-column.uncategorized-column .kanban-column-header {
|
|
background: var(--background-modifier-border);
|
|
}
|
|
|
|
/* Column actions */
|
|
.column-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.column-action-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.column-action-btn:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Empty column placeholder */
|
|
.kanban-column-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: 20px;
|
|
border: 2px dashed var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
margin: 8px;
|
|
background: var(--background-secondary);
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.kanban-column-empty:hover {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Enhanced drag and drop */
|
|
.kanban-column.is-dragover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.kanban-column.is-dragover .kanban-column-empty {
|
|
border-color: var(--interactive-accent);
|
|
background: var(--interactive-accent-hover);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* New task button */
|
|
.kanban-new-task-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Simple column count */
|
|
.kanban-column-count-simple {
|
|
color: var(--text-muted);
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Column Drag and Drop */
|
|
.kanban-column-header:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.kanban-column-header.is-dragging-column {
|
|
opacity: 0.5;
|
|
transform: rotate(2deg);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.kanban-column-header.column-drop-target {
|
|
background: var(--background-modifier-hover);
|
|
border: 2px dashed var(--color-accent);
|
|
transform: scale(1.02);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.kanban-column-header.column-drop-target::after {
|
|
content: "Drop here to reorder";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--color-accent);
|
|
color: var(--text-on-accent);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
font-weight: 500;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
/* Simplified Filter Controls */
|
|
.kanban-filter-controls {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.kanban-search-input {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 0.85em;
|
|
width: 200px;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.kanban-search-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.kanban-search-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.kanban-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.board-stats-simple {
|
|
font-size: 0.8em;
|
|
color: var(--text-muted);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ===== UNIFIED FILTERING SYSTEM STYLES ===== */
|
|
|
|
/* FilterBar Container */
|
|
.filter-bar-container,
|
|
.agenda-filter-bar-container,
|
|
.kanban-filter-bar-container {
|
|
margin-bottom: var(--cs-spacing-md);
|
|
padding: var(--cs-spacing-md);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* FilterBar Main Container */
|
|
.filter-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
/* FilterBar Main Row */
|
|
.filter-bar-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Search Section */
|
|
.filter-bar-search {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.filter-bar-search-input {
|
|
width: 100%;
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-bar-search-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.filter-bar-search-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Removed search icon styles */
|
|
|
|
/* Controls Section */
|
|
.filter-bar-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Sort Controls */
|
|
.filter-bar-sort {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.filter-bar-label {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-bar-select {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 13px;
|
|
min-width: 100px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-bar-select:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.filter-bar-select:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.filter-bar-sort-direction {
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
min-width: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.filter-bar-sort-direction:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.filter-bar-sort-direction:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
/* Group Controls */
|
|
.filter-bar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
/* Toggle Controls */
|
|
.filter-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.filter-toggle-checkbox {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-toggle-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-toggle:hover .filter-toggle-label {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Advanced Filters Toggle Button */
|
|
.filter-bar-advanced-toggle {
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-bar-advanced-toggle:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.filter-bar-advanced-toggle.active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.filter-bar-active-indicator {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 50%;
|
|
padding: 1px 5px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
line-height: 1;
|
|
min-width: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Advanced Filters Panel */
|
|
.filter-bar-advanced {
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
padding-top: var(--cs-spacing-sm);
|
|
margin-top: var(--cs-spacing-sm);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--cs-spacing-md);
|
|
}
|
|
|
|
.filter-bar-advanced-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.filter-bar-advanced-item .filter-bar-label {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.filter-bar-advanced-item .filter-bar-select {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-bar-checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
user-select: none;
|
|
}
|
|
|
|
.filter-bar-checkbox {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Style radio buttons the same as checkboxes in filter groups */
|
|
.filter-bar-checkbox-group input[type="radio"] {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Checkbox Groups */
|
|
.filter-bar-checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
padding: 6px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.filter-bar-checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-bar-checkbox-group .filter-bar-checkbox-label {
|
|
padding: 4px 6px;
|
|
border-radius: var(--cs-radius-sm);
|
|
transition: background-color 0.1s ease;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.filter-bar-checkbox-group .filter-bar-checkbox-label:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.filter-bar-checkbox-group .filter-bar-checkbox {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Empty state for checkbox groups */
|
|
.filter-bar-checkbox-group:empty::after {
|
|
content: "No options available";
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Multi-select Dropdowns */
|
|
.filter-multiselect {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.filter-multiselect-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 120px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--cs-spacing-xs);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-multiselect-button:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.filter-multiselect-button.active {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
}
|
|
|
|
.filter-multiselect-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
box-shadow: var(--shadow-l);
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.filter-multiselect-option {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
font-size: var(--cs-text-sm);
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.filter-multiselect-option:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.filter-multiselect-option input[type="checkbox"] {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Filter Chip/Badge Styles */
|
|
.filter-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
padding: 2px var(--cs-spacing-xs);
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: var(--cs-radius-sm);
|
|
font-size: var(--cs-text-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-chip-remove {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: var(--cs-text-xs);
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.filter-chip-remove:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Clear Filters Button */
|
|
.filter-clear-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background: var(--background-primary);
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-sm);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-clear-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.filter-clear-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.filter-bar-container,
|
|
.agenda-filter-bar-container,
|
|
.kanban-filter-bar-container {
|
|
padding: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.filter-bar-main {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.filter-bar-search {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-bar-controls {
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.filter-bar-sort,
|
|
.filter-bar-group {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filter-bar-select {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-bar-advanced {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.filter-bar-controls {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-bar-sort,
|
|
.filter-bar-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Integration with existing view styles */
|
|
.agenda-view-container .filter-bar-container {
|
|
margin-bottom: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.kanban-view .filter-bar-container {
|
|
border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.task-list-view-container .filter-bar-container {
|
|
margin-top: var(--cs-spacing-md);
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
.theme-dark .filter-bar-container,
|
|
.theme-dark .agenda-filter-bar-container,
|
|
.theme-dark .kanban-filter-bar-container {
|
|
background: var(--background-primary-alt);
|
|
}
|
|
|
|
.theme-dark .filter-multiselect-dropdown {
|
|
background: var(--background-primary-alt);
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.theme-dark .filter-advanced-toggle.active {
|
|
background: var(--interactive-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.filter-bar-container,
|
|
.agenda-filter-bar-container,
|
|
.kanban-filter-bar-container {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.filter-control select,
|
|
.filter-search-input,
|
|
.filter-multiselect-button {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
/* Date Range Picker Styles */
|
|
.filter-bar-date-inputs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-sm);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.filter-bar-date-input-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.filter-bar-date-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-bar-date-input {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.filter-bar-date-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 1px var(--interactive-accent);
|
|
}
|
|
|
|
.filter-bar-date-clear {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
background-color: var(--background-secondary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
cursor: pointer;
|
|
transition: background-color var(--cs-transition-fast);
|
|
}
|
|
|
|
.filter-bar-date-clear:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.filter-bar-date-clear:active {
|
|
background-color: var(--background-modifier-active);
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.filter-control select,
|
|
.filter-search-input,
|
|
.filter-multiselect-button,
|
|
.filter-advanced-toggle,
|
|
.filter-clear-button,
|
|
.filter-bar-date-input,
|
|
.filter-bar-date-clear {
|
|
transition: none;
|
|
}
|
|
|
|
.filter-advanced-toggle .collapse-icon {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Pomodoro Stats View Styles */
|
|
.pomodoro-stats-container {
|
|
padding: var(--cs-spacing-lg);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.pomodoro-stats-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-stats-refresh-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-md);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-stats-refresh-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.pomodoro-stats-section {
|
|
margin-bottom: var(--cs-spacing-xl);
|
|
}
|
|
|
|
.pomodoro-stats-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--cs-spacing-md);
|
|
}
|
|
|
|
.pomodoro-view-stats-button {
|
|
padding: var(--cs-spacing-xs) var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
background: var(--background-primary);
|
|
color: var(--text-muted);
|
|
font-size: var(--cs-text-xs);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-view-stats-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.pomodoro-stats-section h3 {
|
|
font-size: var(--cs-text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
margin: 0 0 var(--cs-spacing-md) 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: var(--cs-spacing-md);
|
|
margin-bottom: var(--cs-spacing-lg);
|
|
}
|
|
|
|
.pomodoro-stat-card {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
padding: var(--cs-spacing-md);
|
|
text-align: center;
|
|
transition: all var(--cs-transition-fast);
|
|
}
|
|
|
|
.pomodoro-stat-card:hover {
|
|
background: var(--background-modifier-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.pomodoro-stat-card .stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: var(--text-accent);
|
|
line-height: 1;
|
|
margin-bottom: var(--cs-spacing-xs);
|
|
}
|
|
|
|
.pomodoro-stat-card .stat-label {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.pomodoro-recent-sessions {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
padding: var(--cs-spacing-md);
|
|
}
|
|
|
|
.pomodoro-no-sessions {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: var(--cs-spacing-lg);
|
|
}
|
|
|
|
.pomodoro-session-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cs-spacing-md);
|
|
padding: var(--cs-spacing-sm) 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.pomodoro-session-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.session-date {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-muted);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.session-duration {
|
|
font-size: var(--cs-text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
min-width: 50px;
|
|
}
|
|
|
|
.session-status {
|
|
font-size: var(--cs-text-xs);
|
|
padding: 2px var(--cs-spacing-xs);
|
|
border-radius: var(--cs-radius-sm);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-completed {
|
|
background: rgba(46, 204, 113, 0.1);
|
|
color: #2ecc71;
|
|
}
|
|
|
|
.status-interrupted {
|
|
background: rgba(231, 76, 60, 0.1);
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.session-task {
|
|
font-size: var(--cs-text-sm);
|
|
color: var(--text-normal);
|
|
flex-grow: 1;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|