mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
b1c755ddfa
- Create modular folder structure - Move classes to dedicated files - Extract utility functions - Improve error handling - Apply Obsidian plugin guidelines - Use setHeading for section headings - Use Vault API instead of adapter where possible - Simplify codebase with fewer console logs - Update frontmatter processing to use FileManager.processFrontMatter
520 lines
9.4 KiB
CSS
520 lines
9.4 KiB
CSS
/* ChronoSync Plugin Styles */
|
|
|
|
/* Main container for all views */
|
|
.chronosync-container {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Calendar Month View */
|
|
.calendar-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.calendar-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.current-month {
|
|
font-weight: bold;
|
|
min-width: 8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.view-switcher {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.view-switcher button {
|
|
border-radius: 4px;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.view-switcher button.active {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.calendar-grid-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.calendar-header {
|
|
display: contents;
|
|
}
|
|
|
|
.calendar-day-header {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding: 0.5rem;
|
|
background-color: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.calendar-day {
|
|
position: relative;
|
|
min-height: 2.5rem;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
|
|
.calendar-day:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.calendar-day.today {
|
|
background-color: var(--interactive-accent-hover);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-day.selected,
|
|
.week-day-header.selected {
|
|
border: 2px solid var(--interactive-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 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: var(--background-primary-alt);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Main Content Area with Tabs */
|
|
.chronosync-main-content {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chronosync-tabs {
|
|
display: flex;
|
|
background-color: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.chronosync-tab {
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
font-size: 0.9rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.chronosync-tab:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.chronosync-tab.active {
|
|
background-color: var(--background-primary);
|
|
border-bottom: 2px solid var(--interactive-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.chronosync-content-area {
|
|
padding: 1rem;
|
|
background-color: var(--background-primary);
|
|
min-height: 300px;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Task Filters */
|
|
.task-filters {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.filter-group select {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.add-task-button {
|
|
padding: 0.25rem 0.5rem;
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Task List */
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-item {
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-item:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.task-item-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-item-metadata {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.task-priority-high {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.task-priority-normal {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-priority-low {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.task-status-open {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.task-status-in-progress {
|
|
color: var(--text-warning);
|
|
}
|
|
|
|
.task-status-done {
|
|
color: var(--text-success);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.task-overdue {
|
|
color: var(--text-error);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Task Creation Modal */
|
|
.task-creation-modal {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.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-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.note-item {
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.note-item:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.note-item-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.note-item-date {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.note-item-tags {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.note-tag {
|
|
font-size: 0.8rem;
|
|
padding: 0.1rem 0.3rem;
|
|
background-color: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.calendar-grid {
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.calendar-day {
|
|
min-height: 1.5rem;
|
|
padding: 0.25rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.task-creation-modal {
|
|
min-width: 300px;
|
|
}
|
|
}
|