mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
dea10252aa
• Update TaskCard class names by replacing the "recurring-task" modifier with "task-recurring" in both createTaskCard and updateTaskCard functions to ensure consistency in recurring task styling. • In agenda.css, simplify toggle controls by removing the custom Material Design checkbox styles and letting native checkboxes render naturally. Adjust gap, font size, padding, and hover state to use updated theme variables (e.g. --cs-spacing-md, --font-ui-medium). • In base.css, update button transitions and animations: – Reduce hover transform scales and simplify transitions for filled and elevated buttons. – Remove custom checkbox and radio styles entirely so that browsers or themes handle them natively. – Adjust elevation levels and transform values to create a more subtle interactive feel. • In components.css, update the unified card styles to be more theme-dependent by: – Replacing expressive Material 3 settings (e.g. border-radius variable changes from --cs-radius-md to --radius-m, updated transition timing). – Removing extraneous transform and scaling effects on hover in favor of simple border and transform changes. • In kanban.css, remove redundant hover animations and explicit transitions for task cards so that the cards rely on their inherent styling rather than duplicative animations. • In modals.css, rework modal styling to be cleaner and simpler: – Change modal padding, header typography, and form element spacing to use new sizing variables (e.g. --size-4-4, --font-ui-large). – Replace expressive animations and keyframes with simplified transitions. – Revise autocomplete, day selector, time estimate, filename preview, and metadata sections for clarity and consistency with the new theme tokens. • In pomodoro.css, adjust timer display animation duration (increasing pulse duration from 1s to 2s), add explicit min-width and centered layout for task displays, and update slide-out behavior for empty task displays. • In tasks.css, modify task card priority styling: – Increase the left border width for task cards. – Update the recurring task indicator by switching from a border effect on task-item to a more visible infinity symbol overlay with full opacity and proper z-index. • In variables.css, simplify design tokens: – Remove expressive shadow variants, expressive radius variations, and multiple easing curves; keep only essential tokens for a clean, theme-driven look. – Update transition tokens to use simplified easing (e.g. --cs-motion-easing-spring) and remove expressive motion tokens. – Consolidate color scales to rely on theme-provided or simplified fallback colors. These changes simplify the UI’s visual language, reduce complexity from excessive expressive styling, and standardize the component class names and CSS variable usage for improved consistency and easier theme integration.
378 lines
No EOL
10 KiB
CSS
378 lines
No EOL
10 KiB
CSS
/* ChronoSync Modals - Clean and Simple Styling */
|
|
|
|
/* ===== MODAL CONTAINERS ===== */
|
|
.task-creation-modal,
|
|
.task-edit-modal {
|
|
padding: var(--size-4-4);
|
|
max-width: 580px;
|
|
width: 100%;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
/* ===== MODAL HEADERS ===== */
|
|
.task-creation-modal .setting-item-heading,
|
|
.task-edit-modal .setting-item-heading {
|
|
font-size: var(--font-ui-large);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
line-height: 1.3;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
margin-bottom: var(--size-4-2);
|
|
padding-bottom: var(--size-2-2);
|
|
}
|
|
|
|
/* ===== FORM STRUCTURE ===== */
|
|
.task-creation-modal .form-group,
|
|
.task-edit-modal .form-group {
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.task-creation-modal .form-label,
|
|
.task-creation-modal .form-group label {
|
|
display: block;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
margin-bottom: var(--size-2-1);
|
|
}
|
|
|
|
.task-edit-modal .form-label,
|
|
.task-edit-modal .form-group label {
|
|
display: block;
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
margin-bottom: var(--size-2-1);
|
|
}
|
|
|
|
.task-creation-modal .form-input-container,
|
|
.task-edit-modal .form-input-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* ===== FORM INPUTS ===== */
|
|
.task-creation-modal .form-input,
|
|
.task-creation-modal .form-select,
|
|
.task-creation-modal .title-input,
|
|
.task-creation-modal .time-estimate-input {
|
|
padding: var(--size-2-2) var(--size-2-3);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
transition: border-color 0.2s ease;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
|
|
.task-edit-modal .form-input,
|
|
.task-edit-modal .form-select,
|
|
.task-edit-modal .title-input,
|
|
.task-edit-modal .time-estimate-input {
|
|
padding: var(--size-2-2) var(--size-2-3);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
transition: border-color 0.2s ease;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
|
|
.task-creation-modal .form-input:hover,
|
|
.task-edit-modal .form-input:hover,
|
|
.task-creation-modal .form-select:hover,
|
|
.task-edit-modal .form-select:hover,
|
|
.task-creation-modal .title-input:hover,
|
|
.task-edit-modal .title-input:hover,
|
|
.task-creation-modal .time-estimate-input:hover,
|
|
.task-edit-modal .time-estimate-input:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.task-creation-modal .form-input:focus,
|
|
.task-edit-modal .form-input:focus,
|
|
.task-creation-modal .form-select:focus,
|
|
.task-edit-modal .form-select:focus,
|
|
.task-creation-modal .title-input:focus,
|
|
.task-edit-modal .title-input:focus,
|
|
.task-creation-modal .time-estimate-input:focus,
|
|
.task-edit-modal .time-estimate-input:focus {
|
|
border-color: var(--interactive-accent);
|
|
outline: none;
|
|
}
|
|
|
|
/* ===== CHARACTER COUNTER ===== */
|
|
.task-creation-modal .character-counter,
|
|
.task-edit-modal .character-counter,
|
|
.task-creation-modal .char-counter,
|
|
.task-edit-modal .char-counter {
|
|
position: absolute;
|
|
top: -1.4rem;
|
|
right: 0;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.task-creation-modal .character-counter.warning,
|
|
.task-edit-modal .character-counter.warning,
|
|
.task-creation-modal .char-counter.warning,
|
|
.task-edit-modal .char-counter.warning {
|
|
color: var(--text-error);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== AUTOCOMPLETE ===== */
|
|
.task-creation-modal .autocomplete-suggestions,
|
|
.task-edit-modal .autocomplete-suggestions {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
box-shadow: var(--shadow-s);
|
|
z-index: 1000;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
padding: var(--size-2-1) 0;
|
|
}
|
|
|
|
.task-creation-modal .suggestion-item,
|
|
.task-edit-modal .suggestion-item {
|
|
padding: var(--size-2-1) var(--size-2-3);
|
|
cursor: pointer;
|
|
font-size: var(--font-ui-medium);
|
|
color: var(--text-normal);
|
|
line-height: 1.5;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.task-creation-modal .suggestion-item:hover,
|
|
.task-edit-modal .suggestion-item:hover,
|
|
.task-creation-modal .suggestion-item.selected,
|
|
.task-edit-modal .suggestion-item.selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* ===== DAYS OF WEEK SELECTOR ===== */
|
|
.task-creation-modal .days-of-week-container,
|
|
.task-edit-modal .days-of-week-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-2-3);
|
|
padding: var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-m);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.task-creation-modal .day-checkbox-container,
|
|
.task-edit-modal .day-checkbox-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--size-2-1);
|
|
}
|
|
|
|
.task-creation-modal .day-checkbox,
|
|
.task-edit-modal .day-checkbox {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.task-creation-modal .day-label,
|
|
.task-edit-modal .day-label {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ===== TIME ESTIMATE ===== */
|
|
.task-creation-modal .time-estimate-container,
|
|
.task-edit-modal .time-estimate-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
.task-creation-modal .time-estimate-input,
|
|
.task-edit-modal .time-estimate-input {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-creation-modal .time-estimate-label,
|
|
.task-edit-modal .time-estimate-label {
|
|
font-size: var(--font-ui-medium);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== FILENAME PREVIEW (Creation Modal Only) ===== */
|
|
.task-creation-modal .filename-preview {
|
|
margin-top: var(--size-2-2);
|
|
padding: var(--size-2-2) var(--size-2-3);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--font-ui-small);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.task-creation-modal .filename-preview-valid {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.task-creation-modal .filename-preview-error {
|
|
color: var(--text-error);
|
|
background: var(--background-modifier-error);
|
|
}
|
|
|
|
/* ===== TASK METADATA (Edit Modal Only) ===== */
|
|
.task-edit-modal .task-metadata-footer {
|
|
margin-top: var(--size-4-3);
|
|
padding-top: var(--size-4-2);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.task-edit-modal .task-metadata {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.task-edit-modal .metadata-item {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
padding: var(--size-2-3) var(--size-4-2);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ===== BUTTONS ===== */
|
|
.task-creation-modal .button-container,
|
|
.task-edit-modal .button-container {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-top: var(--size-4-3);
|
|
padding-top: var(--size-4-2);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Primary Action Buttons */
|
|
.task-creation-modal .create-button,
|
|
.task-edit-modal .save-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2-1);
|
|
padding: var(--size-2-2) var(--size-4-2);
|
|
border: none;
|
|
border-radius: var(--radius-m);
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
font-family: inherit;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.task-creation-modal .create-button:hover,
|
|
.task-edit-modal .save-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
}
|
|
|
|
/* Secondary Action Buttons */
|
|
.task-creation-modal .cancel-button,
|
|
.task-edit-modal .cancel-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2-1);
|
|
padding: var(--size-2-2) var(--size-4-2);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
background: transparent;
|
|
color: var(--text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.task-creation-modal .cancel-button:hover,
|
|
.task-edit-modal .cancel-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Open Note Button (Edit Modal Only) */
|
|
.task-edit-modal .open-note-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2-1);
|
|
padding: var(--size-2-2) var(--size-4-2);
|
|
border: none;
|
|
border-radius: var(--radius-m);
|
|
background: transparent;
|
|
color: var(--interactive-accent);
|
|
font-family: inherit;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.task-edit-modal .open-note-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* ===== RESPONSIVE DESIGN ===== */
|
|
@media (max-width: 768px) {
|
|
.task-creation-modal,
|
|
.task-edit-modal {
|
|
padding: var(--size-4-2);
|
|
max-width: 92vw;
|
|
}
|
|
|
|
.task-creation-modal .button-container,
|
|
.task-edit-modal .button-container {
|
|
flex-direction: column;
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
.task-creation-modal .days-of-week-container,
|
|
.task-edit-modal .days-of-week-container {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--size-2-2);
|
|
}
|
|
} |