mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
1be4fb0329
• Renamed the main plugin class from ChronoSyncPlugin to TaskNotesPlugin and updated all related types, settings, and UI elements accordingly. • Updated settings interface and default folder paths from "ChronoSync" to "TaskNotes", and renamed ChronoSyncSettingTab to TaskNotesSettingTab. • Modified all ribbon icon labels, command names, group identifiers, and user notices to reflect the new "TaskNotes" branding. • In view types (CalendarView, NotesView, TaskListView), updated container classes and hover sources from "chronosync-*" to "tasknotes-*" for consistent styling and identification. • Changed the view type constants in types.ts to use "tasknotes" prefixes. • In task creation modal and helper functions, adjusted import and instance type to reference TaskNotesPlugin. • Removed legacy daily note metadata commands (incrementPomodoros, toggle-workout, toggle-meditate, and associated update logic) from the main plugin as they are no longer part of TaskNotes functionality. • Cleaned up YAML frontmatter generation in helpers by removing default values for pomodoros, workout, and meditate. This commit ensures branding consistency across the codebase and removes unused functionality, paving the way for continued development of TaskNotes features.
2937 lines
64 KiB
CSS
2937 lines
64 KiB
CSS
/* ChronoSync 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 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Button click feedback */
|
|
button:active:not(:disabled) {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* Processing state for buttons */
|
|
button.processing {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
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,
|
|
.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);
|
|
}
|
|
|
|
/* 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;
|
|
gap: var(--cs-spacing-xs);
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.colorize-mode-container:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.colorize-mode-label {
|
|
font-size: 0.75rem;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.colorize-mode-select {
|
|
padding: 2px 8px;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
min-height: 20px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.colorize-mode-select:hover {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
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);
|
|
}
|
|
|
|
.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 */
|
|
[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: 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;
|
|
}
|
|
|
|
.filters-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.filters-row.primary-filters {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.filters-row.organization-filters {
|
|
padding: 0.5rem;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
transition: all 0.2s ease;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.filter-group select {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 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);
|
|
padding-bottom: var(--cs-spacing-xs);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-card-content {
|
|
color: var(--text-normal);
|
|
font-size: var(--cs-text-sm);
|
|
}
|
|
|
|
.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 {
|
|
padding: var(--cs-spacing-lg);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
transition: all var(--cs-transition-normal);
|
|
background-color: var(--background-primary);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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 {
|
|
padding: var(--cs-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--cs-transition-fast);
|
|
background-color: var(--background-primary);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
transform: translateZ(0); /* Hardware acceleration */
|
|
height: 100%;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-sm);
|
|
}
|
|
|
|
.agenda-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cs-spacing-xs);
|
|
padding: var(--cs-spacing-sm);
|
|
background: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--cs-radius-md);
|
|
transition: var(--cs-transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.agenda-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.agenda-item.task-item {
|
|
border-left: 3px solid var(--text-error);
|
|
}
|
|
|
|
.agenda-item.note-item {
|
|
border-left: 3px solid var(--text-success);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@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%;
|
|
}
|
|
}
|