mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
1128 lines
33 KiB
CSS
1128 lines
33 KiB
CSS
/* ================================================
|
|
CALENDAR VIEW & MINI-CALENDAR VIEW - BEM STRUCTURE
|
|
================================================ */
|
|
|
|
/* Calendar View Container - Root Block */
|
|
.tasknotes-plugin .calendar-view,
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
gap: var(--tn-spacing-sm);
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Calendar Controls Container */
|
|
.tasknotes-plugin .calendar-view__controls,
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs);
|
|
background: var(--tn-bg-secondary);
|
|
border-radius: var(--tn-radius-sm);
|
|
gap: var(--tn-spacing-xs);
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Calendar Header */
|
|
.tasknotes-plugin .calendar-view__header,
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-sm) 0;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Use consistent button system for view selector */
|
|
.tasknotes-plugin .calendar-view__view-selector,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector {
|
|
/* margin-right: var(--tn-spacing-md); */
|
|
/* min-width: 120px; */
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: var(--tn-radius-sm);
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-sm);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color var(--tn-transition-fast), color var(--tn-transition-fast), box-shadow var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__view-selector:hover,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:hover {
|
|
background: var(--tn-interactive-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__view-selector:focus,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Navigation Section */
|
|
.tasknotes-plugin .calendar-view__navigation,
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Calendar Month Display */
|
|
.tasknotes-plugin .calendar-view__month-display,
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-lg);
|
|
/* min-width: 140px; */
|
|
text-align: center;
|
|
padding-inline: 5px;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__nav-button,
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__today-button,
|
|
.tasknotes-plugin .mini-calendar-view__today-button {
|
|
margin-left: auto;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
font-weight: normal;
|
|
opacity: 0.7;
|
|
transition: opacity var(--tn-transition-fast);
|
|
cursor: var(--cursor-link, pointer);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__today-button:hover,
|
|
.tasknotes-plugin .mini-calendar-view__today-button:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.tasknotes-plugin .calendar-view__loading,
|
|
.tasknotes-plugin .mini-calendar-view__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__loading::before,
|
|
.tasknotes-plugin .mini-calendar-view__loading::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Calendar Grid Container */
|
|
.tasknotes-plugin .calendar-view__grid-container,
|
|
.tasknotes-plugin .mini-calendar-view__grid-container {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Grid */
|
|
.tasknotes-plugin .calendar-view__grid,
|
|
.tasknotes-plugin .mini-calendar-view__grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Calendar Grid Header Row */
|
|
.tasknotes-plugin .calendar-view__grid-header,
|
|
.tasknotes-plugin .mini-calendar-view__grid-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
background: var(--tn-bg-secondary);
|
|
}
|
|
|
|
/* Calendar Week Row */
|
|
.tasknotes-plugin .calendar-view__week,
|
|
.tasknotes-plugin .mini-calendar-view__week {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
}
|
|
|
|
/* Calendar Day Header (Sun, Mon, etc.) */
|
|
.tasknotes-plugin .calendar-view__day-header,
|
|
.tasknotes-plugin .mini-calendar-view__day-header {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--tn-spacing-xs);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: none;
|
|
}
|
|
|
|
/* Calendar Day Cell - consistent styling */
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
position: relative;
|
|
min-height: 2rem;
|
|
padding: var(--tn-spacing-xs);
|
|
text-align: center;
|
|
cursor: var(--cursor-link, pointer);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tn-bg-primary);
|
|
border: none;
|
|
transition: background-color var(--tn-transition-fast), color var(--tn-transition-fast), opacity var(--tn-transition-fast);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day:hover {
|
|
background-color: var(--tn-interactive-hover);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Day - Today State */
|
|
.tasknotes-plugin .calendar-view__day--today,
|
|
.tasknotes-plugin .mini-calendar-view__day--today {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-interactive-accent);
|
|
font-weight: 600;
|
|
box-shadow: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--today::after,
|
|
.tasknotes-plugin .mini-calendar-view__day--today::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* Calendar Day - Selected State */
|
|
.tasknotes-plugin .calendar-view__day--selected,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected {
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
font-weight: 500;
|
|
background-color: color-mix(in srgb, var(--tn-interactive-accent) 12%, transparent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Selected but not today */
|
|
.tasknotes-plugin .calendar-view__day--selected:not(.calendar-view__day--today),
|
|
.tasknotes-plugin .mini-calendar-view__day--selected:not(.mini-calendar-view__day--today) {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
/* Selected and today */
|
|
.tasknotes-plugin .calendar-view__day--today.calendar-view__day--selected,
|
|
.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Calendar Day - Outside Month */
|
|
.tasknotes-plugin .calendar-view__day--outside-month,
|
|
.tasknotes-plugin .mini-calendar-view__day--outside-month {
|
|
color: var(--tn-text-faint);
|
|
background-color: transparent;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Selected state overrides content indicator borders */
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-notes,
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-notes,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-daily-note {
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* Day Indicators Container (for dots/markers) */
|
|
.tasknotes-plugin .calendar-view__day-indicators,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicators {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Individual Day Indicator */
|
|
.tasknotes-plugin .calendar-view__day-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--notes,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--notes {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--tasks {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day-indicator--important,
|
|
.tasknotes-plugin .mini-calendar-view__day-indicator--important {
|
|
background-color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__external-event-indicators {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
max-width: 100%;
|
|
margin-top: 2px;
|
|
line-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__external-event-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background-color: var(--tn-interactive-accent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tn-bg-primary) 35%, transparent);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* Content Indicators (Notes, Tasks, Daily Notes) */
|
|
.tasknotes-plugin .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
transition: background-color var(--tn-transition-fast), opacity var(--tn-transition-fast), transform var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes {
|
|
bottom: 4px;
|
|
left: 30%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks {
|
|
bottom: 4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
|
|
bottom: 4px;
|
|
left: 70%;
|
|
transform: translateX(-50%);
|
|
background-color: var(--tn-color-daily-note);
|
|
width: 7px;
|
|
height: 7px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Hover effects for content indicators */
|
|
.tasknotes-plugin .calendar-view__day:hover .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
|
|
transform: translateX(-50%) scale(1.2);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Notes Indicators - Different intensities */
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-few {
|
|
background: var(--tn-color-notes-light);
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some {
|
|
background: var(--tn-color-notes-medium);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
background: var(--tn-color-notes-heavy);
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Task Indicators - Different states */
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-due,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due {
|
|
background: var(--tn-color-error);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-completed,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed {
|
|
background: var(--tn-color-success);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-scheduled,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled {
|
|
background: var(--tn-interactive-accent);
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator--tasks-archived,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived {
|
|
background: var(--tn-color-archived);
|
|
width: 8px;
|
|
height: 8px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Hover tooltip for indicators */
|
|
.tasknotes-plugin .calendar-view__content-indicator:hover::after,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator:hover::after {
|
|
content: attr(aria-label);
|
|
position: absolute;
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-normal);
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
white-space: nowrap;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: var(--tn-z-tooltip);
|
|
box-shadow: var(--tn-shadow-medium);
|
|
pointer-events: none;
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Day Content State Modifiers */
|
|
.tasknotes-plugin .calendar-view__day--has-content,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content {
|
|
font-weight: 500;
|
|
background-color: transparent;
|
|
border-top: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
/* Notes Content Indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-few {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-light);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-some {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-medium);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-many {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-heavy);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
/* Tasks Content Indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-error);
|
|
background: linear-gradient(to right, var(--cs-red-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-scheduled-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-interactive-accent);
|
|
background: linear-gradient(to right, var(--cs-blue-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-completed-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-success);
|
|
background: linear-gradient(to right, var(--cs-green-100), transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day--has-archived-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-archived-tasks {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-archived);
|
|
background: linear-gradient(to right, var(--cs-gray-100), transparent);
|
|
}
|
|
|
|
/* Daily Note Content Indicator */
|
|
.tasknotes-plugin .calendar-view__day--has-daily-note,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
|
|
border-left: var(--tn-spacing-xs) solid var(--tn-color-daily-note);
|
|
background: linear-gradient(to right, var(--cs-purple-100), transparent);
|
|
}
|
|
|
|
/* Enhanced hover effects for content indicators */
|
|
.tasknotes-plugin .calendar-view__day--has-content:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
|
|
border-left-width: var(--tn-spacing-sm);
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
/* Mini calendar minimalist adjustments */
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
padding: 0;
|
|
gap: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
padding: 0;
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-sm);
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
gap: var(--tn-spacing-xs);
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend {
|
|
margin-top: var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-summary {
|
|
cursor: var(--cursor-link, pointer);
|
|
list-style: none;
|
|
padding: calc(var(--tn-spacing-xs) * 0.25) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend[open] .mini-calendar-view__legend-summary {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--tn-spacing-xs) * 0.5);
|
|
margin-top: calc(var(--tn-spacing-xs) * 0.75);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: calc(var(--tn-spacing-xs) * 0.5);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-section-title {
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--due {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--scheduled {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--completed {
|
|
background-color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--notes {
|
|
background-color: var(--tn-color-notes-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-dot--daily {
|
|
background-color: var(--tn-color-daily-note);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-label {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-interaction {
|
|
display: flex;
|
|
gap: var(--tn-spacing-xs);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-action {
|
|
font-weight: 600;
|
|
color: var(--tn-text-muted);
|
|
min-width: 96px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__legend-description {
|
|
color: var(--tn-text-muted);
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: var(--tn-button-height-sm);
|
|
height: var(--tn-button-height-sm);
|
|
min-width: 0;
|
|
padding: 0;
|
|
flex: 0 0 var(--tn-button-height-sm);
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__nav-button:hover {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:hover,
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__view-selector:focus-visible {
|
|
outline: 1px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-md);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--tn-text-muted);
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__today-button {
|
|
min-width: 0;
|
|
flex: 0 1 auto;
|
|
white-space: nowrap;
|
|
padding: 0 var(--tn-spacing-xs);
|
|
}
|
|
|
|
@container (max-width: 220px) {
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-basis: 24px;
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-size: var(--tn-font-size-xs);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__today-button {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
min-height: 24px;
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid-container {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid {
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
gap: 1px;
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__grid-header {
|
|
background: transparent;
|
|
grid-template-columns: 40px repeat(7, 1fr);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day-header {
|
|
background: transparent;
|
|
color: var(--tn-text-muted);
|
|
letter-spacing: 0.08em;
|
|
padding: calc(var(--tn-spacing-xs) * 0.75) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__week {
|
|
gap: 1px;
|
|
grid-template-columns: 40px repeat(7, 1fr);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
background: transparent;
|
|
border-radius: var(--tn-radius-sm);
|
|
min-height: 2.25rem;
|
|
border: none;
|
|
transition: border-color var(--tn-transition-fast), background-color var(--tn-transition-fast), color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day:hover {
|
|
background: color-mix(in srgb, var(--tn-interactive-hover) 25%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent);
|
|
color: var(--tn-interactive-accent);
|
|
font-weight: 700;
|
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tn-interactive-accent) 85%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today::after {
|
|
bottom: 5px;
|
|
width: 5px;
|
|
height: 5px;
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 85%, transparent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--selected {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 20%, transparent);
|
|
border: 1px solid var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 25%, transparent);
|
|
box-shadow: inset 0 0 0 2px var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--outside-month {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-few,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-notes-many,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks,
|
|
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
|
|
background: transparent;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day-indicators {
|
|
margin-top: 4px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
bottom: 6px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
|
|
transform: translateX(-50%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .calendar-view,
|
|
.tasknotes-plugin .mini-calendar-view {
|
|
padding: var(--tn-spacing-xs);
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__controls,
|
|
.tasknotes-plugin .mini-calendar-view__controls {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__nav-button,
|
|
.tasknotes-plugin .mini-calendar-view__nav-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
min-height: 1.8rem;
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tasknotes-plugin .calendar-view__header,
|
|
.tasknotes-plugin .mini-calendar-view__header {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__navigation,
|
|
.tasknotes-plugin .mini-calendar-view__navigation {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__month-display,
|
|
.tasknotes-plugin .mini-calendar-view__month-display {
|
|
font-size: var(--tn-font-size-md);
|
|
min-width: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__day,
|
|
.tasknotes-plugin .mini-calendar-view__day {
|
|
min-height: 1.5rem;
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .calendar-view__content-indicator,
|
|
.tasknotes-plugin .mini-calendar-view__content-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
}
|
|
|
|
/* Mini Calendar Specific Indicators */
|
|
.tasknotes-plugin .note-indicator,
|
|
.tasknotes-plugin .task-indicator,
|
|
.tasknotes-plugin .daily-note-indicator {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.few-notes {
|
|
background-color: var(--tn-color-notes-light);
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.some-notes {
|
|
background-color: var(--tn-color-notes-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .note-indicator.many-notes {
|
|
background-color: var(--tn-color-notes-heavy);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.due-tasks {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.completed-tasks {
|
|
background-color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-indicator.scheduled-tasks {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .daily-note-indicator {
|
|
background-color: var(--tn-color-daily-note);
|
|
}
|
|
|
|
/* Cache Loading Indicator */
|
|
.tasknotes-plugin .cache-loading-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-md);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .cache-loading-indicator::before {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
|
|
border-top: 2px solid var(--tn-text-muted);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR DRAG AND DROP STATES
|
|
================================================ */
|
|
|
|
/* Drag over state for mini calendar days */
|
|
.tasknotes-plugin .mini-calendar-view__day--dragover {
|
|
background-color: var(--tn-interactive-accent-hover);
|
|
border-color: var(--tn-interactive-accent);
|
|
color: var(--tn-text-on-accent);
|
|
transform: scale(1.1);
|
|
box-shadow: var(--tn-shadow-light);
|
|
z-index: 10;
|
|
border: 2px solid var(--tn-interactive-accent);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR WEEK NUMBERS & SELECTION
|
|
================================================ */
|
|
|
|
/* Week number header cell */
|
|
.tasknotes-plugin .mini-calendar-view__week-header {
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--tn-spacing-xs);
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
border: none;
|
|
}
|
|
|
|
/* Week number cell */
|
|
.tasknotes-plugin .mini-calendar-week-number {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--tn-font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--tn-text-muted);
|
|
background: var(--tn-bg-secondary);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color var(--tn-transition-fast), color var(--tn-transition-fast);
|
|
border-right: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-week-number:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR NOTE PREVIEW TOOLTIP
|
|
================================================ */
|
|
|
|
.mini-calendar-note-preview {
|
|
position: absolute;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-4-3);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
max-width: 300px;
|
|
min-width: 200px;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-header {
|
|
font-weight: 600;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-list li {
|
|
padding: var(--tn-spacing-xs) 0;
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-note-title {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-note-type {
|
|
color: var(--tn-text-muted);
|
|
font-size: var(--tn-font-size-xs);
|
|
font-style: italic;
|
|
}
|
|
|
|
.mini-calendar-note-preview .preview-more {
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
margin-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
/* ================================================
|
|
MINI CALENDAR HEAT MAP INTENSITY
|
|
================================================ */
|
|
|
|
/* Heat map intensity levels (GitHub contributions style) */
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-none {
|
|
/* Default background, no change */
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-low {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 25%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-medium {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 40%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-high {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 55%, var(--tn-bg-primary));
|
|
}
|
|
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-very-high {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 70%, var(--tn-bg-primary));
|
|
color: var(--tn-text-on-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Preserve hover effect on heat map days */
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-low:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-medium:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-high:hover,
|
|
.tasknotes-plugin .mini-calendar-view__day--intensity-very-high:hover {
|
|
background: color-mix(in srgb, var(--tn-interactive-accent) 35%, var(--tn-interactive-hover));
|
|
}
|