obsidian-plugin/callumalpass_tasknotes
1
0
Fork 0
mirror of https://github.com/callumalpass/tasknotes.git synced 2026-07-22 12:50:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
callumalpass_tasknotes/styles
History
callumalpass 045b05e065 test(e2e): document UI issues and fix pomodoro button affordance 
- Add 5 new test.fixme() tests documenting discovered UI issues:
  - Kanban columns showing empty space instead of task cards
  - Create task modal icons lacking text labels
  - Year view task badges truncated and unreadable
  - Edit modal DETAILS placeholder with low contrast
  - (Fixed) Pomodoro timer +/- buttons lacking visual affordance

- Fix pomodoro timer duration adjustment buttons:
  - Add visible background and border styling
  - Add hover state with accent color border
  - Add font-weight and cursor pointer for better UX

- Fix flaky e2e tests by adding timeout catches for click operations
2026-01-01 00:15:46 +11:00
..
advanced-calendar-view.css fix: use theme accent color for today column in week/day views 2025-12-31 09:34:09 +11:00
agenda-view.css Refactor: Clean up CSS comment artifacts 2025-11-20 21:07:37 +11:00
base.css Refactor event listeners, modals, and styles to improve consistency and maintainability 2025-06-21 08:48:50 +10:00
bases-views.css feat: show status icon+label in Kanban column headers, hide on cards 2025-12-27 13:11:21 +01:00
calendar-view.css fix: multiple bug fixes and UI enhancements 2025-11-30 17:16:16 +11:00
date-picker.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
file-selector-modal.css refactor: consolidate file selector modals into FileSelectorModal 2025-11-30 11:32:47 +11:00
filter-bar-bem.css Refactor: Remove remaining 'Use consistent button system' comments 2025-11-20 21:36:48 +11:00
filter-heading.css feat: add filter heading display to TaskListView 2025-08-18 00:24:32 +12:00
index.css feat: add filter heading display to TaskListView 2025-08-18 00:24:32 +12:00
kanban-view.css feat(kanban): add optional status icon consolidation in column headers 2025-12-31 10:00:59 +11:00
modal-bem.css Refactor: Further simplify CSS styling 2025-11-20 21:01:37 +11:00
note-card-bem.css Refactor: Further simplify CSS styling 2025-11-20 21:01:37 +11:00
pomodoro-stats-view.css Refactor: Remove remaining 'Use consistent button system' comments 2025-11-20 21:36:48 +11:00
pomodoro-view.css test(e2e): document UI issues and fix pomodoro button affordance 2026-01-01 00:15:46 +11:00
README.md feat: Remove legacy class names, cleanup legacy styles, and update code for BEM consistency 2025-06-09 13:01:19 +10:00
relationships.css Fix: Correct CSS class name for relationships widget 2025-11-18 08:53:20 +11:00
reminder-modal.css feat: Add default reminders system for automatic task reminder configuration 2025-08-07 22:47:04 +10:00
search-box.css fix: improve search UX with no-results feedback and hide empty groups 2025-11-25 20:52:45 +11:00
settings-view.css style(settings): change documentation link from button to simple link 2025-12-07 14:25:59 +11:00
stats-view.css Refactor: Consolidate color patterns and improve consistency 2025-11-20 22:22:27 +11:00
status-bar.css feat: status bar to display currently tracked tasks (#114) 2025-06-30 21:58:35 +10:00
task-action-palette-modal.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
task-card-bem.css fix(#1301): remove blank space from inline task wikilinks when metadata is empty 2025-12-07 12:09:53 +11:00
task-card-note-widget.css refactor: consolidate CodeMirror widget cursor styles into reusable utility 2025-09-30 18:42:58 +10:00
task-inline-widget.css fix: improve inline task embed layout for indented bullets (#1157) 2025-11-30 11:32:47 +11:00
task-list-view.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
task-modal.css fix: remove focus glow from title inputs in task modal 2025-12-08 21:24:45 +11:00
task-selector-with-create-modal.css refactor: consolidate file selector modals into FileSelectorModal 2025-11-30 11:32:47 +11:00
time-entry-editor-modal.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
unscheduled-tasks-selector-modal.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
utilities.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00
UTILITIES.md Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10:00
UTILITY-USAGE-GUIDE.md Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10:00
variables.css style: Implement borderless button design system across all components 2025-07-27 09:30:59 +10:00
webhook-settings.css Refactor: Pare back unnecessary custom styling 2025-11-20 20:59:30 +11:00

README.md

CSS Build System

This directory contains the modular CSS source files for the TaskNotes plugin. The main styles.css file is generated from these source files during the build process.

File Structure

Core System Files

  • variables.css - CSS custom properties and design system variables
  • utilities.css - Utility classes for layout, spacing, typography, and states
  • base.css - Basic styles, animations, card components, and layout
  • components.css - Reusable UI components, utilities, and modals

BEM Component Files (NEW)

  • task-card-bem.css - BEM TaskCard component with proper scoping
  • note-card-bem.css - BEM NoteCard component with proper scoping
  • filter-bar-bem.css - BEM FilterBar component with proper scoping
  • modal-bem.css - BEM Modal components with proper scoping

View-Specific Files (NEW)

  • task-list-view.css - BEM TaskListView component
  • calendar-view.css - BEM CalendarView component
  • kanban-view.css - BEM KanbanView component
  • agenda-view.css - BEM AgendaView component
  • notes-view.css - BEM NotesView component
  • pomodoro-view.css - BEM PomodoroView component
  • pomodoro-stats-view.css - BEM PomodoroStatsView component
  • settings-view.css - BEM SettingsView component

Legacy Files (Remaining)

  • pomodoro.css - Pomodoro view specific styles (to be deprecated)
  • settings.css - Settings page styles (to be deprecated)
  • tasks-legacy.css - Legacy task styles for backwards compatibility

Documentation Files

  • index.css - Documentation file (not included in build)
  • README.md - This documentation file
  • UTILITIES.md - Utility class documentation
  • UTILITY-USAGE-GUIDE.md - Guide for using utility classes

Development Workflow

Making Changes

  1. Edit the appropriate CSS file in this directory
  2. Run npm run build-css to regenerate the main styles.css file
  3. Test your changes in the application
  4. Commit your changes to the source files (the generated styles.css is ignored by git)

Build Commands

  • npm run build-css - Build CSS only
  • npm run dev - Build CSS + start development server
  • npm run build - Build CSS + full production build

File Loading Order

The CSS files are concatenated in dependency order:

  1. variables.css (CSS custom properties - loaded first)
  2. utilities.css (utility classes)
  3. base.css (foundational styles)
  4. task-card-bem.css (BEM TaskCard component)
  5. note-card-bem.css (BEM NoteCard component)
  6. filter-bar-bem.css (BEM FilterBar component)
  7. modal-bem.css (BEM Modal components)
  8. View-specific BEM files (task-list-view, calendar-view, kanban-view, etc.)
  9. components.css (general components)
  10. Legacy files (pomodoro.css, settings.css)

CI/CD Process

The GitHub Actions workflow automatically:

  1. Builds the CSS from source files during release
  2. Includes the generated styles.css in the release artifacts
  3. Ensures the plugin has all necessary files for distribution

Important Notes

  • Never edit styles.css directly - it will be overwritten during builds
  • The styles.css file is not tracked in git - only source files are committed
  • All CSS variables should be defined in variables.css
  • Follow the existing patterns and naming conventions
  • Use CSS custom properties (variables) instead of hardcoded values
  • Test changes across different views (Calendar, Tasks, Kanban, etc.)

Troubleshooting

If styles aren't updating:

  1. Run npm run build-css to regenerate the CSS
  2. Check that your changes are in the correct source file
  3. Verify the build completed without errors
  4. Clear browser cache if testing in development

If the build fails:

  1. Check the console output for specific error messages
  2. Verify all CSS files exist and are readable
  3. Check for syntax errors in your CSS
  4. Ensure file paths in build-css.mjs are correct