Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
/* ================================================
|
|
|
|
|
TASKNOTES SCOPED UTILITY CLASSES
|
|
|
|
|
================================================
|
|
|
|
|
|
|
|
|
|
This file contains a comprehensive set of utility classes for the
|
|
|
|
|
ChronoSync/TaskNotes plugin. All utilities are properly scoped under
|
|
|
|
|
.tasknotes-plugin and follow the established naming conventions.
|
|
|
|
|
|
|
|
|
|
Naming Convention: .tn-{property}-{value}
|
|
|
|
|
All utilities use --tn- CSS variables for consistency
|
|
|
|
|
|
|
|
|
|
Categories:
|
|
|
|
|
- Layout Utilities (flexbox, grid, positioning)
|
|
|
|
|
- Spacing Utilities (margin, padding, gap)
|
|
|
|
|
- Typography Utilities (text alignment, font styles)
|
|
|
|
|
- Display Utilities (visibility, display types)
|
|
|
|
|
- Background & Border Utilities
|
|
|
|
|
- State Utilities (hover, focus, loading)
|
|
|
|
|
- Animation Utilities
|
|
|
|
|
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
LAYOUT UTILITIES - FLEXBOX
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-inline {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Flex Direction */
|
|
|
|
|
.tasknotes-plugin .tn-flex-row {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-col {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-row-reverse {
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-col-reverse {
|
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Flex Wrap */
|
|
|
|
|
.tasknotes-plugin .tn-flex-wrap {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-nowrap {
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-wrap-reverse {
|
|
|
|
|
flex-wrap: wrap-reverse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Justify Content */
|
|
|
|
|
.tasknotes-plugin .tn-justify-start {
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-justify-end {
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-justify-center {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-justify-between {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-justify-around {
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-justify-evenly {
|
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Align Items */
|
|
|
|
|
.tasknotes-plugin .tn-items-start {
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-items-end {
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-items-center {
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-items-baseline {
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-items-stretch {
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Align Self */
|
|
|
|
|
.tasknotes-plugin .tn-self-auto {
|
|
|
|
|
align-self: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-self-start {
|
|
|
|
|
align-self: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-self-end {
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-self-center {
|
|
|
|
|
align-self: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-self-stretch {
|
|
|
|
|
align-self: stretch;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Flex Growth and Shrink */
|
|
|
|
|
.tasknotes-plugin .tn-flex-1 {
|
|
|
|
|
flex: 1 1 0%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-auto {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-initial {
|
|
|
|
|
flex: 0 1 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-none {
|
|
|
|
|
flex: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grow {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grow-0 {
|
|
|
|
|
flex-grow: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shrink {
|
|
|
|
|
flex-shrink: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shrink-0 {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Common Flex Combinations */
|
|
|
|
|
.tasknotes-plugin .tn-flex-center {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-between {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-around {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-evenly {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-col-center {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-flex-col-between {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
LAYOUT UTILITIES - GRID
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-inline {
|
|
|
|
|
display: inline-grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Grid Template Columns */
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-1 {
|
|
|
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-2 {
|
|
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-3 {
|
|
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-4 {
|
|
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-5 {
|
|
|
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-6 {
|
|
|
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-7 {
|
|
|
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-cols-12 {
|
|
|
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Grid Template Rows */
|
|
|
|
|
.tasknotes-plugin .tn-grid-rows-1 {
|
|
|
|
|
grid-template-rows: repeat(1, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-rows-2 {
|
|
|
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-rows-3 {
|
|
|
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-grid-rows-4 {
|
|
|
|
|
grid-template-rows: repeat(4, minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Grid Column Span */
|
|
|
|
|
.tasknotes-plugin .tn-col-span-1 {
|
|
|
|
|
grid-column: span 1 / span 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-col-span-2 {
|
|
|
|
|
grid-column: span 2 / span 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-col-span-3 {
|
|
|
|
|
grid-column: span 3 / span 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-col-span-4 {
|
|
|
|
|
grid-column: span 4 / span 4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-col-span-full {
|
|
|
|
|
grid-column: 1 / -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Grid Row Span */
|
|
|
|
|
.tasknotes-plugin .tn-row-span-1 {
|
|
|
|
|
grid-row: span 1 / span 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-row-span-2 {
|
|
|
|
|
grid-row: span 2 / span 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-row-span-3 {
|
|
|
|
|
grid-row: span 3 / span 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-row-span-full {
|
|
|
|
|
grid-row: 1 / -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
LAYOUT UTILITIES - POSITIONING
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-static {
|
|
|
|
|
position: static;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-fixed {
|
|
|
|
|
position: fixed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-absolute {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-relative {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sticky {
|
|
|
|
|
position: sticky;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Positioning Values */
|
|
|
|
|
.tasknotes-plugin .tn-inset-0 {
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-top-0 {
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-right-0 {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bottom-0 {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-left-0 {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-top-auto {
|
|
|
|
|
top: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-right-auto {
|
|
|
|
|
right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bottom-auto {
|
|
|
|
|
bottom: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-left-auto {
|
|
|
|
|
left: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
SPACING UTILITIES - MARGIN
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* All sides */
|
|
|
|
|
.tasknotes-plugin .tn-m-0 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-xs {
|
|
|
|
|
margin: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-sm {
|
|
|
|
|
margin: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-md {
|
|
|
|
|
margin: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-lg {
|
|
|
|
|
margin: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-xl {
|
|
|
|
|
margin: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-m-auto {
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Horizontal */
|
|
|
|
|
.tasknotes-plugin .tn-mx-0 {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-xs {
|
|
|
|
|
margin-left: var(--tn-spacing-xs);
|
|
|
|
|
margin-right: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-sm {
|
|
|
|
|
margin-left: var(--tn-spacing-sm);
|
|
|
|
|
margin-right: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-md {
|
|
|
|
|
margin-left: var(--tn-spacing-md);
|
|
|
|
|
margin-right: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-lg {
|
|
|
|
|
margin-left: var(--tn-spacing-lg);
|
|
|
|
|
margin-right: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-xl {
|
|
|
|
|
margin-left: var(--tn-spacing-xl);
|
|
|
|
|
margin-right: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mx-auto {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Vertical */
|
|
|
|
|
.tasknotes-plugin .tn-my-0 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-xs {
|
|
|
|
|
margin-top: var(--tn-spacing-xs);
|
|
|
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-sm {
|
|
|
|
|
margin-top: var(--tn-spacing-sm);
|
|
|
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-md {
|
|
|
|
|
margin-top: var(--tn-spacing-md);
|
|
|
|
|
margin-bottom: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-lg {
|
|
|
|
|
margin-top: var(--tn-spacing-lg);
|
|
|
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-xl {
|
|
|
|
|
margin-top: var(--tn-spacing-xl);
|
|
|
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-my-auto {
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
margin-bottom: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Individual sides */
|
|
|
|
|
.tasknotes-plugin .tn-mt-0 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-xs {
|
|
|
|
|
margin-top: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-sm {
|
|
|
|
|
margin-top: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-md {
|
|
|
|
|
margin-top: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-lg {
|
|
|
|
|
margin-top: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-xl {
|
|
|
|
|
margin-top: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mt-auto {
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-0 {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-xs {
|
|
|
|
|
margin-right: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-sm {
|
|
|
|
|
margin-right: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-md {
|
|
|
|
|
margin-right: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-lg {
|
|
|
|
|
margin-right: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-xl {
|
|
|
|
|
margin-right: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mr-auto {
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-0 {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-xs {
|
|
|
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-sm {
|
|
|
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-md {
|
|
|
|
|
margin-bottom: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-lg {
|
|
|
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-xl {
|
|
|
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-mb-auto {
|
|
|
|
|
margin-bottom: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-0 {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-xs {
|
|
|
|
|
margin-left: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-sm {
|
|
|
|
|
margin-left: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-md {
|
|
|
|
|
margin-left: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-lg {
|
|
|
|
|
margin-left: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-xl {
|
|
|
|
|
margin-left: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-ml-auto {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
SPACING UTILITIES - PADDING
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* All sides */
|
|
|
|
|
.tasknotes-plugin .tn-p-0 {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-p-xs {
|
|
|
|
|
padding: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-p-sm {
|
|
|
|
|
padding: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-p-md {
|
|
|
|
|
padding: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-p-lg {
|
|
|
|
|
padding: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-p-xl {
|
|
|
|
|
padding: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Horizontal */
|
|
|
|
|
.tasknotes-plugin .tn-px-0 {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-px-xs {
|
|
|
|
|
padding-left: var(--tn-spacing-xs);
|
|
|
|
|
padding-right: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-px-sm {
|
|
|
|
|
padding-left: var(--tn-spacing-sm);
|
|
|
|
|
padding-right: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-px-md {
|
|
|
|
|
padding-left: var(--tn-spacing-md);
|
|
|
|
|
padding-right: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-px-lg {
|
|
|
|
|
padding-left: var(--tn-spacing-lg);
|
|
|
|
|
padding-right: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-px-xl {
|
|
|
|
|
padding-left: var(--tn-spacing-xl);
|
|
|
|
|
padding-right: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Vertical */
|
|
|
|
|
.tasknotes-plugin .tn-py-0 {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-py-xs {
|
|
|
|
|
padding-top: var(--tn-spacing-xs);
|
|
|
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-py-sm {
|
|
|
|
|
padding-top: var(--tn-spacing-sm);
|
|
|
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-py-md {
|
|
|
|
|
padding-top: var(--tn-spacing-md);
|
|
|
|
|
padding-bottom: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-py-lg {
|
|
|
|
|
padding-top: var(--tn-spacing-lg);
|
|
|
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-py-xl {
|
|
|
|
|
padding-top: var(--tn-spacing-xl);
|
|
|
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Individual sides */
|
|
|
|
|
.tasknotes-plugin .tn-pt-0 {
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pt-xs {
|
|
|
|
|
padding-top: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pt-sm {
|
|
|
|
|
padding-top: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pt-md {
|
|
|
|
|
padding-top: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pt-lg {
|
|
|
|
|
padding-top: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pt-xl {
|
|
|
|
|
padding-top: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-0 {
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-xs {
|
|
|
|
|
padding-right: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-sm {
|
|
|
|
|
padding-right: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-md {
|
|
|
|
|
padding-right: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-lg {
|
|
|
|
|
padding-right: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pr-xl {
|
|
|
|
|
padding-right: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-0 {
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-xs {
|
|
|
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-sm {
|
|
|
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-md {
|
|
|
|
|
padding-bottom: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-lg {
|
|
|
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pb-xl {
|
|
|
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-0 {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-xs {
|
|
|
|
|
padding-left: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-sm {
|
|
|
|
|
padding-left: var(--tn-spacing-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-md {
|
|
|
|
|
padding-left: var(--tn-spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-lg {
|
|
|
|
|
padding-left: var(--tn-spacing-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pl-xl {
|
|
|
|
|
padding-left: var(--tn-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
SPACING UTILITIES - GAP
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-0 {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: 0;
|
|
|
|
|
--tn-gap-column: 0;
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-xs {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-xs);
|
|
|
|
|
--tn-gap-column: var(--tn-spacing-xs);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-sm {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-sm);
|
|
|
|
|
--tn-gap-column: var(--tn-spacing-sm);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-md {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-md);
|
|
|
|
|
--tn-gap-column: var(--tn-spacing-md);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-lg {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-lg);
|
|
|
|
|
--tn-gap-column: var(--tn-spacing-lg);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-xl {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-xl);
|
|
|
|
|
--tn-gap-column: var(--tn-spacing-xl);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Column Gap */
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-0 {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: 0;
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-xs {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: var(--tn-spacing-xs);
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-sm {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: var(--tn-spacing-sm);
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-md {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: var(--tn-spacing-md);
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-lg {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: var(--tn-spacing-lg);
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-x-xl {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-column: var(--tn-spacing-xl);
|
|
|
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Row Gap */
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-0 {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: 0;
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-xs {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-xs);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-sm {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-sm);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-md {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-md);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-lg {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-lg);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-gap-y-xl {
|
2026-05-14 11:06:30 +00:00
|
|
|
--tn-gap-row: var(--tn-spacing-xl);
|
|
|
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
DISPLAY UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-block {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-inline-block {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-inline {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-hidden {
|
2026-05-14 11:06:30 +00:00
|
|
|
display: none;
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-table {
|
|
|
|
|
display: table;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-table-row {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-table-cell {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
VISIBILITY UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-visible {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-invisible {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-collapse {
|
|
|
|
|
visibility: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
TYPOGRAPHY UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Text Alignment */
|
|
|
|
|
.tasknotes-plugin .tn-text-left {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-right {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-justify {
|
|
|
|
|
text-align: justify;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Font Weight */
|
|
|
|
|
.tasknotes-plugin .tn-font-thin {
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-font-light {
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-font-normal {
|
|
|
|
|
font-weight: var(--tn-font-weight-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-font-medium {
|
|
|
|
|
font-weight: var(--tn-font-weight-medium);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-font-semibold {
|
|
|
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-font-bold {
|
|
|
|
|
font-weight: var(--tn-font-weight-bold);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Font Size */
|
|
|
|
|
.tasknotes-plugin .tn-text-xs {
|
|
|
|
|
font-size: var(--tn-font-size-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-sm {
|
|
|
|
|
font-size: var(--tn-font-size-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-base {
|
|
|
|
|
font-size: var(--tn-font-size-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-lg {
|
|
|
|
|
font-size: var(--tn-font-size-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-xl {
|
|
|
|
|
font-size: var(--tn-font-size-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-2xl {
|
|
|
|
|
font-size: var(--tn-font-size-2xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text Transform */
|
|
|
|
|
.tasknotes-plugin .tn-uppercase {
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lowercase {
|
|
|
|
|
text-transform: lowercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-capitalize {
|
|
|
|
|
text-transform: capitalize;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-normal-case {
|
|
|
|
|
text-transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text Decoration */
|
|
|
|
|
.tasknotes-plugin .tn-underline {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-line-through {
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-no-underline {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Line Height */
|
|
|
|
|
.tasknotes-plugin .tn-leading-none {
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-leading-tight {
|
|
|
|
|
line-height: 1.25;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-leading-snug {
|
|
|
|
|
line-height: 1.375;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-leading-normal {
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-leading-relaxed {
|
|
|
|
|
line-height: 1.625;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-leading-loose {
|
|
|
|
|
line-height: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text Colors */
|
|
|
|
|
.tasknotes-plugin .tn-text-normal {
|
|
|
|
|
color: var(--tn-text-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-muted {
|
|
|
|
|
color: var(--tn-text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-faint {
|
|
|
|
|
color: var(--tn-text-faint);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-accent {
|
|
|
|
|
color: var(--tn-text-accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-success {
|
|
|
|
|
color: var(--tn-color-success);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-warning {
|
|
|
|
|
color: var(--tn-color-warning);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-error {
|
|
|
|
|
color: var(--tn-color-error);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-text-info {
|
|
|
|
|
color: var(--tn-color-info);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
BACKGROUND UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-primary {
|
|
|
|
|
background-color: var(--tn-bg-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-secondary {
|
|
|
|
|
background-color: var(--tn-bg-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-accent {
|
|
|
|
|
background-color: var(--tn-interactive-accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-success {
|
|
|
|
|
background-color: var(--tn-color-success);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-warning {
|
|
|
|
|
background-color: var(--tn-color-warning);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-error {
|
|
|
|
|
background-color: var(--tn-color-error);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-info {
|
|
|
|
|
background-color: var(--tn-color-info);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-bg-transparent {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
BORDER UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Border Width */
|
|
|
|
|
.tasknotes-plugin .tn-border-0 {
|
|
|
|
|
border-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border {
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-2 {
|
|
|
|
|
border-width: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-t {
|
|
|
|
|
border-top-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-r {
|
|
|
|
|
border-right-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-b {
|
|
|
|
|
border-bottom-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-l {
|
|
|
|
|
border-left-width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Border Style */
|
|
|
|
|
.tasknotes-plugin .tn-border-solid {
|
|
|
|
|
border-style: solid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-dashed {
|
|
|
|
|
border-style: dashed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-dotted {
|
|
|
|
|
border-style: dotted;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-none {
|
|
|
|
|
border-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Border Color */
|
|
|
|
|
.tasknotes-plugin .tn-border-normal {
|
|
|
|
|
border-color: var(--tn-border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-hover {
|
|
|
|
|
border-color: var(--tn-border-color-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-accent {
|
|
|
|
|
border-color: var(--tn-interactive-accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-success {
|
|
|
|
|
border-color: var(--tn-color-success);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-warning {
|
|
|
|
|
border-color: var(--tn-color-warning);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-error {
|
|
|
|
|
border-color: var(--tn-color-error);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-border-transparent {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Border Radius */
|
|
|
|
|
.tasknotes-plugin .tn-rounded-none {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-xs {
|
|
|
|
|
border-radius: var(--tn-radius-xs);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-sm {
|
|
|
|
|
border-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded {
|
|
|
|
|
border-radius: var(--tn-radius-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-md {
|
|
|
|
|
border-radius: var(--tn-radius-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-lg {
|
|
|
|
|
border-radius: var(--tn-radius-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-xl {
|
|
|
|
|
border-radius: var(--tn-radius-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-full {
|
|
|
|
|
border-radius: var(--tn-radius-full);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Individual corner radius */
|
|
|
|
|
.tasknotes-plugin .tn-rounded-t-sm {
|
|
|
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
|
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-r-sm {
|
|
|
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
|
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-b-sm {
|
|
|
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
|
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-rounded-l-sm {
|
|
|
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
|
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
SHADOW UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow-none {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow-light {
|
|
|
|
|
box-shadow: var(--tn-shadow-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow {
|
|
|
|
|
box-shadow: var(--tn-shadow-medium);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow-medium {
|
|
|
|
|
box-shadow: var(--tn-shadow-medium);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow-strong {
|
|
|
|
|
box-shadow: var(--tn-shadow-strong);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-shadow-hover {
|
|
|
|
|
box-shadow: var(--tn-shadow-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
OVERFLOW UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-auto {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-hidden {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-visible {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-scroll {
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-x-auto {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-x-hidden {
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-x-scroll {
|
|
|
|
|
overflow-x: scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-y-auto {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-y-hidden {
|
|
|
|
|
overflow-y: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-overflow-y-scroll {
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
SIZE UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Width */
|
|
|
|
|
.tasknotes-plugin .tn-w-auto {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-full {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-screen {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-min {
|
|
|
|
|
width: min-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-max {
|
|
|
|
|
width: max-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-fit {
|
|
|
|
|
width: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Specific widths */
|
|
|
|
|
.tasknotes-plugin .tn-w-0 {
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-px {
|
|
|
|
|
width: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-1 {
|
|
|
|
|
width: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-2 {
|
|
|
|
|
width: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-4 {
|
|
|
|
|
width: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-8 {
|
|
|
|
|
width: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-12 {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-16 {
|
|
|
|
|
width: 4rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-20 {
|
|
|
|
|
width: 5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-w-24 {
|
|
|
|
|
width: 6rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Height */
|
|
|
|
|
.tasknotes-plugin .tn-h-auto {
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-full {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-screen {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-min {
|
|
|
|
|
height: min-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-max {
|
|
|
|
|
height: max-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-fit {
|
|
|
|
|
height: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Specific heights */
|
|
|
|
|
.tasknotes-plugin .tn-h-0 {
|
|
|
|
|
height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-px {
|
|
|
|
|
height: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-1 {
|
|
|
|
|
height: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-2 {
|
|
|
|
|
height: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-4 {
|
|
|
|
|
height: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-8 {
|
|
|
|
|
height: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-12 {
|
|
|
|
|
height: 3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-16 {
|
|
|
|
|
height: 4rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-20 {
|
|
|
|
|
height: 5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-h-24 {
|
|
|
|
|
height: 6rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Min/Max Width */
|
|
|
|
|
.tasknotes-plugin .tn-min-w-0 {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-min-w-full {
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-xs {
|
|
|
|
|
max-width: 20rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-sm {
|
|
|
|
|
max-width: 24rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-md {
|
|
|
|
|
max-width: 28rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-lg {
|
|
|
|
|
max-width: 32rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-xl {
|
|
|
|
|
max-width: 36rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-full {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-w-none {
|
|
|
|
|
max-width: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Min/Max Height */
|
|
|
|
|
.tasknotes-plugin .tn-min-h-0 {
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-min-h-full {
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-h-full {
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-max-h-screen {
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
Z-INDEX UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-0 {
|
|
|
|
|
z-index: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-10 {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-20 {
|
|
|
|
|
z-index: 20;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-30 {
|
|
|
|
|
z-index: 30;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-40 {
|
|
|
|
|
z-index: 40;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-50 {
|
|
|
|
|
z-index: 50;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-auto {
|
|
|
|
|
z-index: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-sticky {
|
|
|
|
|
z-index: var(--tn-z-sticky);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-dropdown {
|
|
|
|
|
z-index: var(--tn-z-dropdown);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-modal {
|
|
|
|
|
z-index: var(--tn-z-modal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-z-tooltip {
|
|
|
|
|
z-index: var(--tn-z-tooltip);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
CURSOR UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-auto {
|
|
|
|
|
cursor: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-default {
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-pointer {
|
2026-05-17 04:28:33 +00:00
|
|
|
cursor: var(--cursor-link, pointer);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-wait {
|
|
|
|
|
cursor: wait;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-text {
|
|
|
|
|
cursor: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-move {
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-help {
|
|
|
|
|
cursor: help;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-not-allowed {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-grab {
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-cursor-grabbing {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
USER SELECT UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-select-none {
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-select-text {
|
|
|
|
|
user-select: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-select-all {
|
|
|
|
|
user-select: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-select-auto {
|
|
|
|
|
user-select: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
POINTER EVENTS UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pointer-events-none {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-pointer-events-auto {
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
TRANSITIONS UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-none {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-fast {
|
2026-05-16 14:01:14 +00:00
|
|
|
transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), opacity var(--tn-transition-fast), transform var(--tn-transition-fast);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition {
|
2026-05-16 14:01:14 +00:00
|
|
|
transition: background-color var(--tn-transition-normal), border-color var(--tn-transition-normal), box-shadow var(--tn-transition-normal), color var(--tn-transition-normal), opacity var(--tn-transition-normal), transform var(--tn-transition-normal);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-slow {
|
2026-05-16 14:01:14 +00:00
|
|
|
transition: background-color var(--tn-transition-slow), border-color var(--tn-transition-slow), box-shadow var(--tn-transition-slow), color var(--tn-transition-slow), opacity var(--tn-transition-slow), transform var(--tn-transition-slow);
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-colors {
|
|
|
|
|
transition: color var(--tn-transition-normal), background-color var(--tn-transition-normal), border-color var(--tn-transition-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-opacity {
|
|
|
|
|
transition: opacity var(--tn-transition-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transition-transform {
|
|
|
|
|
transition: transform var(--tn-transition-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
TRANSFORM UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transform {
|
|
|
|
|
transform: var(--tw-transform);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-transform-none {
|
|
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Scale */
|
|
|
|
|
.tasknotes-plugin .tn-scale-0 {
|
|
|
|
|
--tw-scale-x: 0;
|
|
|
|
|
--tw-scale-y: 0;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-50 {
|
|
|
|
|
--tw-scale-x: 0.5;
|
|
|
|
|
--tw-scale-y: 0.5;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-75 {
|
|
|
|
|
--tw-scale-x: 0.75;
|
|
|
|
|
--tw-scale-y: 0.75;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-90 {
|
|
|
|
|
--tw-scale-x: 0.9;
|
|
|
|
|
--tw-scale-y: 0.9;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-95 {
|
|
|
|
|
--tw-scale-x: 0.95;
|
|
|
|
|
--tw-scale-y: 0.95;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-100 {
|
|
|
|
|
--tw-scale-x: 1;
|
|
|
|
|
--tw-scale-y: 1;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-105 {
|
|
|
|
|
--tw-scale-x: 1.05;
|
|
|
|
|
--tw-scale-y: 1.05;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-110 {
|
|
|
|
|
--tw-scale-x: 1.1;
|
|
|
|
|
--tw-scale-y: 1.1;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-scale-125 {
|
|
|
|
|
--tw-scale-x: 1.25;
|
|
|
|
|
--tw-scale-y: 1.25;
|
|
|
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
OPACITY UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-opacity-0 {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-opacity-25 {
|
|
|
|
|
opacity: 0.25;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-opacity-50 {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-opacity-75 {
|
|
|
|
|
opacity: 0.75;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-opacity-100 {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
STATE UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Loading State */
|
|
|
|
|
.tasknotes-plugin .tn-loading {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-loading::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
margin: -8px 0 0 -8px;
|
|
|
|
|
border: 2px solid currentColor;
|
|
|
|
|
border-top-color: transparent;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: tn-spin 0.8s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Disabled State */
|
|
|
|
|
.tasknotes-plugin .tn-disabled {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Interactive States */
|
|
|
|
|
.tasknotes-plugin .tn-hover-opacity:hover {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-hover-shadow:hover {
|
|
|
|
|
box-shadow: var(--tn-shadow-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Focus States */
|
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus {
|
|
|
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
|
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
ANIMATION UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-spin {
|
|
|
|
|
animation: tn-spin 1s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-pulse {
|
|
|
|
|
animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-bounce {
|
|
|
|
|
animation: tn-bounce 1s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-fade-in {
|
|
|
|
|
animation: tn-fade-in 0.3s ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
|
|
|
|
animation: tn-slide-up 0.3s ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Keyframes */
|
|
|
|
|
@keyframes tn-spin {
|
|
|
|
|
0% { transform: rotate(0deg); }
|
|
|
|
|
100% { transform: rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes tn-pulse {
|
|
|
|
|
0%, 100% { opacity: 1; }
|
|
|
|
|
50% { opacity: 0.5; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes tn-bounce {
|
|
|
|
|
0%, 100% {
|
|
|
|
|
transform: translateY(-25%);
|
|
|
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes tn-fade-in {
|
|
|
|
|
0% { opacity: 0; }
|
|
|
|
|
100% { opacity: 1; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes tn-slide-up {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(10px);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
ACCESSIBILITY UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Screen Reader Only */
|
|
|
|
|
.tasknotes-plugin .tn-sr-only {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: -1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
clip: rect(0, 0, 0, 0);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-not-sr-only {
|
|
|
|
|
position: static;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
clip: auto;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
RESPONSIVE UTILITIES (MOBILE-FIRST)
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Small screens (tablets, 768px and up) */
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.tasknotes-plugin .tn-sm-block {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-flex-row {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-flex-col {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-text-left {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-text-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-sm-text-right {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Medium screens (desktops, 992px and up) */
|
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
|
.tasknotes-plugin .tn-md-block {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-flex-row {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-flex-col {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-text-left {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-text-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-md-text-right {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Large screens (large desktops, 1200px and up) */
|
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
|
.tasknotes-plugin .tn-lg-block {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-flex-row {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-flex-col {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-text-left {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-text-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-lg-text-right {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
DARK MODE SUPPORT
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/* Dark mode specific utilities */
|
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-primary {
|
|
|
|
|
background-color: var(--tn-bg-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-secondary {
|
|
|
|
|
background-color: var(--tn-bg-secondary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-normal {
|
|
|
|
|
color: var(--tn-text-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-muted {
|
|
|
|
|
color: var(--tn-text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-border-normal {
|
|
|
|
|
border-color: var(--tn-border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
REDUCED MOTION SUPPORT
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.tasknotes-plugin .tn-transition-fast,
|
|
|
|
|
.tasknotes-plugin .tn-transition,
|
|
|
|
|
.tasknotes-plugin .tn-transition-slow,
|
|
|
|
|
.tasknotes-plugin .tn-transition-colors,
|
|
|
|
|
.tasknotes-plugin .tn-transition-opacity,
|
|
|
|
|
.tasknotes-plugin .tn-transition-transform {
|
2026-05-14 11:06:30 +00:00
|
|
|
transition: none;
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-animate-spin,
|
|
|
|
|
.tasknotes-plugin .tn-animate-pulse,
|
|
|
|
|
.tasknotes-plugin .tn-animate-bounce,
|
|
|
|
|
.tasknotes-plugin .tn-animate-fade-in,
|
|
|
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
2026-05-14 11:06:30 +00:00
|
|
|
animation: none;
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
2026-05-14 11:06:30 +00:00
|
|
|
transform: none;
|
Refactor and add complete BEM‐based, scoped CSS for TaskNotes
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
2025-06-09 02:20:19 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
HIGH CONTRAST SUPPORT
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
@media (prefers-contrast: high) {
|
|
|
|
|
.tasknotes-plugin .tn-border {
|
|
|
|
|
border-width: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus,
|
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
|
|
|
outline-width: 3px;
|
|
|
|
|
}
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
2025-11-20 09:59:30 +00:00
|
|
|
BUTTON UTILITIES - SCOPED FOR SETTINGS ONLY
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
================================================ */
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
/* Base Button - Scoped to settings modal */
|
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: var(--tn-spacing-sm);
|
|
|
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: var(--tn-radius-md);
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--tn-text-normal);
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: var(--tn-font-size-md);
|
|
|
|
|
font-weight: var(--tn-font-weight-medium);
|
|
|
|
|
line-height: 1;
|
2026-05-17 04:28:33 +00:00
|
|
|
cursor: var(--cursor-link, pointer);
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
user-select: none;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
box-shadow: none;
|
2026-05-16 14:01:14 +00:00
|
|
|
transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), transform var(--tn-transition-fast);
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
min-height: var(--tn-button-height-md);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-hover);
|
2025-07-26 23:02:48 +00:00
|
|
|
border: none;
|
|
|
|
|
box-shadow: none;
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:active {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
opacity: 0.8;
|
2025-07-26 23:02:48 +00:00
|
|
|
border: none;
|
|
|
|
|
box-shadow: none;
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:focus-visible {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
|
|
|
outline-offset: 2px;
|
2025-07-26 23:02:48 +00:00
|
|
|
border: none;
|
|
|
|
|
box-shadow: none;
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:disabled {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
opacity: var(--cs-state-disabled);
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
pointer-events: none;
|
2025-07-26 23:02:48 +00:00
|
|
|
border: none;
|
|
|
|
|
box-shadow: none;
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button Sizes */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--sm {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
|
|
|
font-size: var(--tn-font-size-sm);
|
|
|
|
|
min-height: var(--tn-button-height-sm);
|
|
|
|
|
border-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--lg {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
|
|
|
font-size: var(--tn-font-size-lg);
|
|
|
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
|
|
|
min-height: var(--tn-button-height-lg);
|
|
|
|
|
border-radius: var(--tn-radius-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button Variants */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-accent);
|
|
|
|
|
color: var(--text-on-accent);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-accent-hover);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-normal);
|
|
|
|
|
color: var(--tn-text-normal);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-hover);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: transparent;
|
|
|
|
|
color: var(--tn-text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-interactive-hover);
|
|
|
|
|
color: var(--tn-text-normal);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: transparent;
|
|
|
|
|
color: var(--tn-color-error);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-color-error);
|
|
|
|
|
color: var(--tn-bg-primary);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: transparent;
|
|
|
|
|
color: var(--tn-color-success);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success:hover {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
background: var(--tn-color-success);
|
|
|
|
|
color: var(--tn-bg-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Icon-only buttons */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
width: var(--tn-button-height-md);
|
|
|
|
|
height: var(--tn-button-height-md);
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: var(--tn-radius-md);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--sm {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
width: var(--tn-button-height-sm);
|
|
|
|
|
height: var(--tn-button-height-sm);
|
|
|
|
|
border-radius: var(--tn-radius-sm);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--lg {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
width: var(--tn-button-height-lg);
|
|
|
|
|
height: var(--tn-button-height-lg);
|
|
|
|
|
border-radius: var(--tn-radius-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Pill buttons */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--pill {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
border-radius: var(--tn-radius-full);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Full width buttons */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--full {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button Groups */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
display: flex;
|
|
|
|
|
gap: var(--tn-spacing-xs);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group .tn-btn {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
gap: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:first-child {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
border-radius: var(--tn-radius-md) 0 0 var(--tn-radius-md);
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:last-child {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:only-child {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
border-radius: var(--tn-radius-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Loading state */
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
position: relative;
|
|
|
|
|
color: transparent;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-20 09:59:30 +00:00
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading::after {
|
refactor: Implement consistent button styling system throughout plugin
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
2025-07-26 22:44:18 +00:00
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
margin: -8px 0 0 -8px;
|
|
|
|
|
border: 2px solid currentColor;
|
|
|
|
|
border-top-color: transparent;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: tn-spin 0.8s linear infinite;
|
2025-07-27 11:25:41 +00:00
|
|
|
}
|
2025-09-30 08:42:58 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ================================================
|
|
|
|
|
CODEMIRROR WIDGET UTILITIES
|
|
|
|
|
================================================ */
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Widget Cursor Fix
|
|
|
|
|
*
|
|
|
|
|
* Minimal fix for CodeMirror widget artifacts.
|
|
|
|
|
* Only prevents editing inside widgets and hides visual artifacts.
|
|
|
|
|
* Does NOT hide the editor cursor to preserve normal editing experience.
|
|
|
|
|
*
|
|
|
|
|
* Fixes:
|
|
|
|
|
* - Prevents text selection inside widgets
|
|
|
|
|
* - Prevents contenteditable behavior
|
|
|
|
|
* - Hides widget buffer image artifacts
|
|
|
|
|
*
|
|
|
|
|
* Trade-offs:
|
|
|
|
|
* - Cursor may appear next to widgets (acceptable for normal editing UX)
|
|
|
|
|
* - Widget buffer artifacts are hidden
|
|
|
|
|
*
|
|
|
|
|
* Usage: Add .cm-widget-cursor-fix to your widget container element
|
|
|
|
|
*/
|
|
|
|
|
.cm-widget-cursor-fix {
|
|
|
|
|
/* Prevent text selection and editing inside widget */
|
|
|
|
|
user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
|
|
|
|
|
/* Prevent contenteditable behavior */
|
|
|
|
|
-webkit-user-modify: read-only;
|
|
|
|
|
-moz-user-modify: read-only;
|
|
|
|
|
|
|
|
|
|
/* Ensure no text cursor appears inside widget elements */
|
|
|
|
|
caret-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide CodeMirror widgetBuffer image artifacts only */
|
2026-05-14 11:06:30 +00:00
|
|
|
.cm-content .cm-widgetBuffer {
|
|
|
|
|
display: none;
|
2025-09-30 08:42:58 +00:00
|
|
|
}
|