mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
1247 lines
35 KiB
CSS
1247 lines
35 KiB
CSS
/* =================================================================
|
|
ADVANCED FILTER BAR COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
|
|
================================================================= */
|
|
|
|
/* All FilterBar styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
/* Main Container */
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
/* Top Controls (Filter Icon + Search + Templates Button) */
|
|
.tasknotes-plugin .filter-bar__top-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: relative; /* Set as positioning context for the dropdown */
|
|
z-index: 10; /* Ensure this container is on top of the filter box below */
|
|
isolation: isolate; /* Create a new stacking context */
|
|
container-type: inline-size; /* Enable container queries */
|
|
}
|
|
|
|
|
|
/* Active filter badge dot */
|
|
.tasknotes-plugin .filter-bar__filter-toggle.has-active-filters::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--tn-color-recurring, var(--interactive-accent));
|
|
}
|
|
|
|
/* Icon + Text Button Styling */
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 6px;
|
|
min-height: var(--input-height);
|
|
border-radius: var(--radius-s);
|
|
width: auto; /* Override any fixed width */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
white-space: nowrap;
|
|
font-size: var(--font-ui-small);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Override button-specific hover states for consistent text+icon button behavior */
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Clear all button in Filter section header */
|
|
.tasknotes-plugin .filter-bar__clear-filters {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
margin-left: var(--tn-spacing-sm);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--color-grey-tint);
|
|
background-color: var(--color-grey-base);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
.tasknotes-plugin .filter-bar__clear-filters:hover {
|
|
background-color: var(--interactive-hover);
|
|
}
|
|
.tasknotes-plugin .filter-bar__clear-filters svg {
|
|
width: 16px; height: 16px;
|
|
}
|
|
|
|
/* Clear all filters button in Filter section header - matches Save button style exactly */
|
|
.tasknotes-plugin .filter-bar__clear-all-button {
|
|
/* Ensure identical sizing and alignment with Save button */
|
|
width: var(--input-height);
|
|
height: var(--input-height);
|
|
min-width: var(--input-height);
|
|
min-height: var(--input-height);
|
|
padding: 0;
|
|
margin-right: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Ensure the icon is properly centered */
|
|
.tasknotes-plugin .filter-bar__clear-all-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Close modal button - matches other buttons exactly but with transparent background */
|
|
.tasknotes-plugin .filter-bar__close-modal-button {
|
|
/* Identical sizing to Clear and Save buttons */
|
|
width: var(--input-height);
|
|
height: var(--input-height);
|
|
min-width: var(--input-height);
|
|
min-height: var(--input-height);
|
|
padding: 0;
|
|
margin-left: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: top;
|
|
/* Transparent background */
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* Ensure the close icon is properly centered */
|
|
.tasknotes-plugin .filter-bar__close-modal-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Natural Language Date Input Enhancement */
|
|
.tasknotes-plugin .filter-date-input-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input {
|
|
flex: 1;
|
|
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
/* Date input validation states - subtle styling */
|
|
.tasknotes-plugin .filter-date-text-input.is-valid {
|
|
border-inline-start: 2px solid var(--color-green);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 1px rgba(var(--color-green-rgb), 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input.is-invalid {
|
|
border-inline-start: 2px solid var(--color-red);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 1px rgba(var(--color-red-rgb), 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-text-input.is-empty {
|
|
border-inline-start: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-help-button {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--text-muted);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
cursor: var(--cursor-link, pointer);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-help-button:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
border-color: var(--text-normal);
|
|
}
|
|
|
|
.filter-date-help-tooltip {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--tn-spacing-sm);
|
|
box-shadow: var(--shadow-s);
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.filter-date-help-tooltip h4 {
|
|
margin: 0 0 var(--tn-spacing-xs) 0;
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.filter-date-help-tooltip ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px;
|
|
}
|
|
|
|
.filter-date-help-tooltip li {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
color: var(--text-muted);
|
|
background: var(--background-modifier-hover);
|
|
border-radius: var(--radius-s);
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle {
|
|
position: relative; /* context for badge */
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__filter-toggle--active {
|
|
background: var(--interactive-accent-tint);
|
|
color: var(--color-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
height: var(--tn-button-height-md); /* Consistent height */
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button--active {
|
|
background: var(--interactive-accent-tint);
|
|
color: var(--color-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button--saved-view-active {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border: none;
|
|
box-shadow: 0 0 0 1px var(--color-accent);
|
|
}
|
|
|
|
/* Search Input */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex: 1;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
height: var(--tn-button-height-md); /* Consistent height */
|
|
min-width: 0; /* Override any default min-width */
|
|
width: auto; /* Allow natural width */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__search-input:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__search-input::placeholder {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Main Filter Box (collapsible popup) */
|
|
.tasknotes-plugin .filter-bar__main-box {
|
|
position: absolute;
|
|
top: calc(100% + 4px); /* Position below the top controls with a small gap */
|
|
left: auto; /* Let it position dynamically */
|
|
right: auto; /* Let it position dynamically */
|
|
width: min(500px, calc(100vw - 32px)); /* Default preferred width */
|
|
max-width: min(600px, calc(100vw - 32px)); /* Maximum preferred width */
|
|
min-width: min(400px, calc(100vw - 32px)); /* Minimum usable width */
|
|
z-index: 1000; /* High z-index */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--shadow-l);
|
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__main-box--collapsed {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.98);
|
|
pointer-events: none; /* Prevent interaction when hidden */
|
|
}
|
|
|
|
/* =================================================================
|
|
VIEW SELECTOR SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0; /* Default align to right of the container */
|
|
left: auto;
|
|
min-width: 240px;
|
|
max-width: 320px;
|
|
z-index: 1000; /* Ensure it's on top */
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--shadow-l);
|
|
margin-top: 4px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Left-aligned variant for Views-left configuration */
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown.filter-bar__view-selector-dropdown--left {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown--hidden {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.95);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section:not(:last-child) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-section-header {
|
|
font-weight: 600; /* Slightly stronger for better hierarchy */
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
text-transform: none; /* Normal case */
|
|
letter-spacing: 0; /* Natural spacing */
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
margin: 2px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container:hover {
|
|
background: var(--background-modifier-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Drag and drop styles */
|
|
.tasknotes-plugin .filter-bar__view-drag-handle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: var(--tn-spacing-xs);
|
|
color: var(--text-faint);
|
|
cursor: grab;
|
|
font-size: 14px;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
|
|
border-radius: var(--radius-s);
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 2px;
|
|
background: currentColor;
|
|
border-radius: 1px;
|
|
box-shadow:
|
|
0 -4px 0 currentColor,
|
|
0 4px 0 currentColor;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container:hover .filter-bar__view-drag-handle {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle:hover {
|
|
color: var(--text-normal);
|
|
background: var(--background-modifier-hover);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-drag-handle:active {
|
|
cursor: grabbing;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--dragging {
|
|
opacity: 0.8;
|
|
transform: scale(1.02);
|
|
background: var(--background-modifier-hover);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: var(--radius-s);
|
|
z-index: 1000;
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--placeholder {
|
|
opacity: 0.5;
|
|
background: var(--interactive-accent-tint);
|
|
border: 2px dashed var(--color-accent);
|
|
border-radius: var(--radius-s);
|
|
pointer-events: none;
|
|
min-height: 30px;
|
|
transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item {
|
|
flex: 1;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
color: var(--text-normal);
|
|
text-align: left;
|
|
justify-content: flex-start;
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item--active {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--active {
|
|
background: var(--interactive-accent);
|
|
border-radius: var(--radius-s);
|
|
border: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-item-container--active:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-delete {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-delete:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-action {
|
|
display: block;
|
|
width: 100%;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-accent);
|
|
text-align: left;
|
|
cursor: var(--cursor-link, pointer);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-action:hover {
|
|
background: var(--interactive-accent-tint);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-empty-message {
|
|
padding: var(--tn-spacing-lg);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
text-align: center;
|
|
background: var(--background-modifier-hover);
|
|
margin: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* =================================================================
|
|
COLLAPSIBLE FILTER SECTIONS
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__section {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
cursor: var(--cursor-link, pointer);
|
|
padding: var(--tn-spacing-sm) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main:hover {
|
|
background: var(--interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-main::before {
|
|
content: "▼";
|
|
margin-right: var(--tn-spacing-xs);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header--collapsed .filter-bar__section-header-main::before {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__save-button {
|
|
/* Remove individual styles - use tn-btn tn-btn--icon tn-btn--ghost classes */
|
|
padding: 4px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__save-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Expand/Collapse all group buttons - Add pointer cursor but keep good hover */
|
|
.tasknotes-plugin .filter-bar__expand-groups,
|
|
.tasknotes-plugin .filter-bar__collapse-groups {
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__expand-groups:hover,
|
|
.tasknotes-plugin .filter-bar__collapse-groups:hover {
|
|
background: var(--interactive-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__expand-groups svg,
|
|
.tasknotes-plugin .filter-bar__collapse-groups svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-title {
|
|
font-weight: 500; /* Slightly lighter */
|
|
font-size: var(--font-ui-small); /* Consistent size */
|
|
color: var(--text-muted); /* Muted for subtlety */
|
|
text-transform: none; /* Normal case */
|
|
letter-spacing: 0; /* Natural spacing */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__active-view-name {
|
|
font-weight: 400;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-accent);
|
|
margin-left: var(--tn-spacing-xs);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-content {
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
opacity: 1;
|
|
max-height: 1000px; /* Large enough for content */
|
|
overflow: hidden;
|
|
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__section-content--collapsed {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
FILTER BUILDER SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__filter-builder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Filter Groups and Conditions */
|
|
.tasknotes-plugin .filter-bar__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border); /* Subtle border for grouping */
|
|
border-radius: var(--radius-m);
|
|
position: relative;
|
|
}
|
|
|
|
/* Remove styling for the top-level group to blend with its container */
|
|
.tasknotes-plugin .filter-bar__filter-builder > .filter-bar__group {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group .filter-bar__group {
|
|
background: var(--background-secondary-alt);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction .dropdown {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
height: 28px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction .dropdown:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__conjunction-text {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__children {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition .dropdown,
|
|
.tasknotes-plugin .filter-bar__condition .text-input {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs);
|
|
height: 28px;
|
|
max-width: 200px;
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition .dropdown:hover,
|
|
.tasknotes-plugin .filter-bar__condition .text-input:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-xs) 0; /* Let parent padding handle horizontal space */
|
|
background: transparent; /* No background */
|
|
border: 1px; /* No border */
|
|
border-radius: 0;
|
|
flex-wrap: wrap;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition-prefix {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
text-align: right;
|
|
min-width: 50px; /* More flexible width */
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-input {
|
|
border: none; /* No borders on inputs */
|
|
background: transparent; /* Transparent background */
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
width: 100%;
|
|
height: 28px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:hover,
|
|
.tasknotes-plugin .filter-bar__operator-select:hover,
|
|
.tasknotes-plugin .filter-bar__value-input:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:focus,
|
|
.tasknotes-plugin .filter-bar__operator-select:focus,
|
|
.tasknotes-plugin .filter-bar__value-input:focus {
|
|
background-color: var(--background-modifier-hover);
|
|
outline: none;
|
|
}
|
|
|
|
/* A more specific rule to override default component styles within the value container */
|
|
.tasknotes-plugin .filter-bar__value-container .text-input,
|
|
.tasknotes-plugin .filter-bar__value-container .dropdown .select-input {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
height: 26px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container .text-input:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0; /* No gap for combined look */
|
|
flex: 1;
|
|
width: 100%;
|
|
border-radius: var(--radius-s);
|
|
padding: 0 var(--tn-spacing-xs);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-input:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
padding: var(--tn-spacing-xs);
|
|
border-radius: var(--radius-s);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__group-actions {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-sm);
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button {
|
|
padding: var(--tn-spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: var(--font-ui-small);
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__action-button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* =================================================================
|
|
DISPLAY & ORGANIZATION SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__display-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--tn-spacing-md);
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container,
|
|
.tasknotes-plugin .filter-bar__group-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__label {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container .dropdown,
|
|
.tasknotes-plugin .filter-bar__group-container .dropdown {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
height: 28px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
min-width: 120px;
|
|
border-radius: var(--radius-s);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container .dropdown:hover,
|
|
.tasknotes-plugin .filter-bar__group-container .dropdown:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-direction {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: var(--tn-spacing-xs);
|
|
height: 28px;
|
|
width: 30px;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-accent);
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-direction:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-accent-hover);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* =================================================================
|
|
VIEW OPTIONS SECTION
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__view-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-checkbox {
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-option-text {
|
|
user-select: none;
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
/* Hide button text on narrow panes (container width-based responsiveness) */
|
|
@container (max-width: 500px) {
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
padding: 2px 4px;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide Views button text and show only chevron icon */
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: 2px 4px;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
width: var(--input-height);
|
|
font-size: 0; /* Hide text */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
|
|
display: flex;
|
|
}
|
|
|
|
/* Adjust search input to take more space when buttons are icon-only */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex-grow: 2;
|
|
min-width: 0; /* Force override any inherited min-width */
|
|
flex-basis: 0; /* Start from zero width and grow */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.tasknotes-plugin .filter-bar__main-box {
|
|
left: 0;
|
|
right: 0;
|
|
width: min(100%, calc(100vw - 32px));
|
|
min-width: 0;
|
|
max-width: none;
|
|
max-height: min(70vh, 560px);
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__view-selector-dropdown {
|
|
left: 0;
|
|
right: 0;
|
|
width: min(100%, calc(100vw - 32px));
|
|
min-width: 0;
|
|
max-width: none;
|
|
max-height: min(70vh, 420px);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-date-help-button {
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
}
|
|
}
|
|
|
|
/* Fallback for browsers without container query support */
|
|
@media (max-width: 700px) {
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
|
|
padding: 2px 4px;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hide Views button text and show only chevron icon */
|
|
.tasknotes-plugin .filter-bar__templates-button {
|
|
padding: 2px 4px;
|
|
min-width: var(--input-height);
|
|
justify-content: center;
|
|
width: var(--input-height);
|
|
font-size: 0; /* Hide text */
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
|
|
display: flex;
|
|
}
|
|
|
|
/* Adjust search input to take more space when buttons are icon-only */
|
|
.tasknotes-plugin .filter-bar__search-input {
|
|
flex-grow: 2;
|
|
min-width: 0; /* Force override any inherited min-width */
|
|
flex-basis: 0; /* Start from zero width and grow */
|
|
}
|
|
}
|
|
|
|
/* Mobile styles */
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
padding: var(--tn-spacing-sm);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__display-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__sort-container,
|
|
.tasknotes-plugin .filter-bar__group-container {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__children {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* Tablet styles */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.tasknotes-plugin .filter-bar__condition {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__value-container {
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
ACCESSIBILITY & FOCUS STATES
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar__property-select:focus,
|
|
.tasknotes-plugin .filter-bar__operator-select:focus,
|
|
.tasknotes-plugin .filter-bar__conjunction-select:focus,
|
|
.tasknotes-plugin .filter-bar__sort-select:focus,
|
|
.tasknotes-plugin .filter-bar__group-select:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__delete-button:focus,
|
|
.tasknotes-plugin .filter-bar__action-button:focus,
|
|
.tasknotes-plugin .filter-bar__view-options-button:focus,
|
|
.tasknotes-plugin .filter-bar__section-header:focus,
|
|
.tasknotes-plugin .filter-bar__view-selector-button:focus {
|
|
outline: 1px solid var(--color-accent);
|
|
}
|
|
|
|
/* =================================================================
|
|
ERROR STATE STYLING
|
|
================================================================= */
|
|
|
|
.tasknotes-plugin .filter-bar-error {
|
|
padding: var(--size-4-2);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
font-size: var(--font-ui-smaller);
|
|
border-radius: var(--radius-s);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* =================================================================
|
|
DARK MODE COMPATIBILITY
|
|
================================================================= */
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__main-box {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__group {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar__condition {
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .filter-bar-error {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* =================================================================
|
|
HIGH CONTRAST MODE
|
|
================================================================= */
|
|
|
|
@media (prefers-contrast: high) {
|
|
.tasknotes-plugin .advanced-filter-bar {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__condition,
|
|
.tasknotes-plugin .filter-bar__group {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .filter-bar__property-select,
|
|
.tasknotes-plugin .filter-bar__operator-select,
|
|
.tasknotes-plugin .filter-bar__value-input {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
/* =================================================================
|
|
BUTTON ICONS VIA CSS PSEUDO-ELEMENTS
|
|
================================================================= */
|
|
|
|
/* Add filter button - plus sign */
|
|
.tasknotes-plugin .filter-bar__add-filter::before {
|
|
content: "+ ";
|
|
margin-right: 4px;
|
|
font-weight: bold;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Add filter group button - plus sign in circle */
|
|
.tasknotes-plugin .filter-bar__add-group::before {
|
|
content: "⊕ ";
|
|
margin-right: 4px;
|
|
font-weight: bold;
|
|
color: var(--color-accent);
|
|
}
|