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
Callum Alpass 86644e22bc Change task-related icons and update CSS styling for improved UI clarity and interactivity. 
• Update icon usage:
  - In TaskLinkWidget.ts and TaskCard.ts, replace the default "pencil" icon with Obsidian’s built-in "ellipsis-vertical" icon.  (#80)
  - This change clarifies that the icon now represents a menu/options action rather than a direct edit.

• Adjust task card styling:
  - In task-card-bem.css, modify the top position of the recurring-indicator from 6px to 8px for better vertical alignment.

• Refine task inline widget styles:
  - In task-inline-widget.css, set the opacity of the pencil icon from 0.4 to 0, effectively hiding it since it’s no longer used for editing.
  - Add a hover effect for completed task titles, enhancing visual feedback by changing the text color and opacity.
  - Enhance the hover style for task titles by adding a pointer cursor, transition effect, slight padding, and a border-radius to improve the interactive appearance.

These adjustments aim to streamline the UI elements and provide clearer interactive cues for users.
2025-06-29 12:26:57 +10:00
..
advanced-calendar-view.css Add integrated view options UI to FilterBar and update AdvancedCalendarView 2025-06-24 21:18:04 +10:00
agenda-view.css Refactor CSS styles across views to simplify and streamline task card appearance 2025-06-22 15:49:45 +10:00
base.css Refactor event listeners, modals, and styles to improve consistency and maintainability 2025-06-21 08:48:50 +10:00
calendar-view.css Refactor TaskCreationModal UI and update component styling across views 2025-06-22 14:40:00 +10:00
date-picker.css Implement enhanced date picker modal and update task modals with refined UI and functionality 2025-06-27 07:29:14 +10:00
filter-bar-bem.css feat: implement unified "Show" dropdown for filter bar with enhanced filtering 2025-06-28 20:58:03 +10:00
index.css Complete build system cleanup by removing legacy CSS files 2025-06-09 12:54:58 +10:00
kanban-view.css Refactor CSS styles across views to simplify and streamline task card appearance 2025-06-22 15:49:45 +10:00
modal-bem.css Refactor and consolidate modal implementation, update naming and imports, and adjust styles and tests 2025-06-27 21:45:08 +10:00
note-card-bem.css Remove deprecated legacy compatibility CSS selectors for filter bar and note card 2025-06-09 13:06:26 +10:00
notes-view.css Refactor TaskCreationModal UI and update component styling across views 2025-06-22 14:40:00 +10:00
pomodoro-stats-view.css Complete BEM refactoring for remaining views (PomodoroView, PomodoroStatsView, Settings) 2025-06-09 12:32:14 +10:00
pomodoro-view.css Commit: Enhance Pomodoro Button Styles with Consistent Visual Feedback (#14) 2025-06-10 18:42:34 +10: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
settings-view.css Refactor TaskCreationModal UI and update component styling across views 2025-06-22 14:40:00 +10:00
task-action-palette-modal.css Refactor Task Link/UI Updates and Enhance Status Handling 2025-06-22 19:33:03 +10:00
task-card-bem.css Change task-related icons and update CSS styling for improved UI clarity and interactivity. 2025-06-29 12:26:57 +10:00
task-inline-widget.css Change task-related icons and update CSS styling for improved UI clarity and interactivity. 2025-06-29 12:26:57 +10:00
task-list-view.css Refactor CSS styles across views to simplify and streamline task card appearance 2025-06-22 15:49:45 +10:00
task-modal.css Enhance recurring task calendar date interactivity and styling in the edit task modal 2025-06-29 12:26:57 +10:00
task-selector-modal.css Refactor CSS: Remove Modal-Specific Styles from Task Selectors 2025-06-13 21:26:49 +10:00
unscheduled-tasks-selector-modal.css Refactor CSS: Remove Modal-Specific Styles from Task Selectors 2025-06-13 21:26:49 +10:00
utilities.css Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10: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 Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10: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