mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
1135 lines
30 KiB
CSS
1135 lines
30 KiB
CSS
/* =====================================================================
|
|
MODAL COMPONENTS - BEM with TaskNotes Plugin Scoping
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
NATURAL LANGUAGE INPUT - MINIMALIST STYLES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .nl-input-container {
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--tn-font-size-lg);
|
|
line-height: 1.5;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-button-container {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-quick-create-button {
|
|
padding: 6px 16px;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 500;
|
|
border-radius: var(--radius-s);
|
|
border: none;
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-quick-create-button:hover {
|
|
background: var(--interactive-accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-parse-button {
|
|
padding: 6px 14px;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: 500;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--tn-text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-parse-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--tn-text-normal);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-show-detail-button {
|
|
padding: 6px 8px;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: 600;
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
color: var(--tn-text-muted);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-show-detail-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--tn-text-normal);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-container {
|
|
margin-top: var(--size-4-1);
|
|
padding: var(--size-4-1);
|
|
background: var(--background-primary-alt);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 6px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tasknotes-plugin .nl-preview-text-content {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* =====================================================================
|
|
BASE MODAL CONTAINER STYLES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal,
|
|
.tasknotes-plugin .scheduled-date-modal,
|
|
.tasknotes-plugin .task-selector-modal {
|
|
padding: var(--tn-spacing-xl);
|
|
max-width: 580px;
|
|
width: 100%;
|
|
background: var(--tn-bg-primary);
|
|
border-radius: var(--tn-radius-md);
|
|
box-shadow: var(--tn-shadow-strong);
|
|
}
|
|
|
|
/* =====================================================================
|
|
MODAL HEADERS AND HEADINGS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal .setting-item-heading,
|
|
.tasknotes-plugin .scheduled-date-modal .setting-item-heading {
|
|
font-size: var(--tn-font-size-xl);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
color: var(--tn-text-normal);
|
|
line-height: 1.3;
|
|
border-bottom: 1px solid var(--tn-border-color);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* =====================================================================
|
|
SHARED FORM COMPONENTS (BEM)
|
|
===================================================================== */
|
|
|
|
/* Form Group Container */
|
|
.tasknotes-plugin .modal-form__group {
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
/* Form Labels */
|
|
.tasknotes-plugin .modal-form__label {
|
|
display: block;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Help Text */
|
|
.tasknotes-plugin .modal-form__help-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
margin-top: var(--tn-spacing-sm);
|
|
line-height: 1.4;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Input Container */
|
|
.tasknotes-plugin .modal-form__input-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* Base Input Styles */
|
|
.tasknotes-plugin .modal-form__input,
|
|
.tasknotes-plugin .modal-form__select {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-normal);
|
|
line-height: 1.4;
|
|
transition: border-color var(--tn-transition-fast);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
|
|
/* Make select elements taller to prevent dropdown option clipping */
|
|
.tasknotes-plugin .modal-form__select {
|
|
padding: var(--tn-spacing-lg) var(--tn-spacing-lg);
|
|
min-height: 44px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input:hover,
|
|
.tasknotes-plugin .modal-form__select:hover {
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input:focus,
|
|
.tasknotes-plugin .modal-form__select:focus {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Input Modifiers */
|
|
.tasknotes-plugin .modal-form__input--textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--title {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--number {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =====================================================================
|
|
CHARACTER COUNTER COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__char-counter {
|
|
position: absolute;
|
|
top: calc(-1 * var(--tn-spacing-lg));
|
|
right: 0;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-weight: var(--tn-font-weight-normal);
|
|
line-height: 1.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__char-counter--warning {
|
|
color: var(--tn-color-error);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
AUTOCOMPLETE COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__autocomplete {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestions {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
box-shadow: var(--tn-shadow-strong);
|
|
z-index: var(--tn-z-dropdown);
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
padding: var(--tn-spacing-sm) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestion {
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
|
|
cursor: var(--cursor-link, pointer);
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
line-height: 1.5;
|
|
transition: background-color var(--tn-transition-fast);
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__suggestion:hover,
|
|
.tasknotes-plugin .modal-form__suggestion--selected {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DATE/TIME INPUT COMPONENTS
|
|
===================================================================== */
|
|
|
|
/* DateTime Container */
|
|
.tasknotes-plugin .modal-form__datetime-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* User-field date input: full width textbox; icon overlayed on the left */
|
|
.tasknotes-plugin .tn-date-control {
|
|
position: relative;
|
|
padding-left: 35px; /* reserve space for the icon to the left of the textbox */
|
|
}
|
|
.tasknotes-plugin .tn-date-control input[type="text"] {
|
|
padding-left: 0; /* the padding-left is applied on the container */
|
|
}
|
|
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: var(--tn-text-muted);
|
|
z-index: 1;
|
|
}
|
|
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
|
|
/* Date and Time Input Modifiers */
|
|
.tasknotes-plugin .modal-form__input--date {
|
|
flex: 1;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--time {
|
|
width: 120px;
|
|
font-family: var(--tn-font-mono);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* =====================================================================
|
|
TIME ESTIMATE COMPONENT
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__time-estimate {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__time-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =====================================================================
|
|
RECURRENCE COMPONENTS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__recurrence {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__recurrence-options {
|
|
margin-top: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__recurrence-label {
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Interval Input Components */
|
|
.tasknotes-plugin .modal-form__interval-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
margin: var(--tn-spacing-md) 0;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__interval-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--interval {
|
|
width: 80px;
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__interval-unit {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* RRule Options Container */
|
|
.tasknotes-plugin .modal-form__rrule-options {
|
|
margin: var(--tn-spacing-md) 0;
|
|
}
|
|
|
|
/* RRule Labels */
|
|
.tasknotes-plugin .modal-form__rrule-label {
|
|
display: block;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
/* Monthly and Yearly Options */
|
|
.tasknotes-plugin .modal-form__monthly-mode,
|
|
.tasknotes-plugin .modal-form__yearly-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__radio-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__radio-option input[type="radio"] {
|
|
width: auto;
|
|
height: auto;
|
|
flex: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__select--position,
|
|
.tasknotes-plugin .modal-form__select--weekday,
|
|
.tasknotes-plugin .modal-form__select--month {
|
|
width: auto;
|
|
min-width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--day {
|
|
width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__yearly-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DETAILED FORM CONTAINER (TaskCreationModal specific)
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .detailed-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-lg);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.tasknotes-plugin .detailed-form-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* End Condition Options */
|
|
.tasknotes-plugin .modal-form__end-condition {
|
|
margin: var(--tn-spacing-md) 0;
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__end-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-sm);
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__input--count {
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__count-label {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* RRule Summary */
|
|
.tasknotes-plugin .modal-form__rrule-summary {
|
|
margin-top: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-md);
|
|
background: var(--tn-bg-primary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__rrule-text {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Days of Week Grid */
|
|
.tasknotes-plugin .modal-form__days-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: var(--tn-spacing-md);
|
|
margin-top: var(--tn-spacing-md);
|
|
padding: var(--tn-spacing-lg);
|
|
background: var(--tn-bg-primary);
|
|
border-radius: var(--tn-radius-sm);
|
|
border: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-checkbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
cursor: var(--cursor-link, pointer);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-input {
|
|
margin: 0;
|
|
cursor: var(--cursor-link, pointer);
|
|
width: auto;
|
|
height: auto;
|
|
flex: none;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__day-label {
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
cursor: var(--cursor-link, pointer);
|
|
user-select: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* =====================================================================
|
|
BUTTON COMPONENTS
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__buttons {
|
|
display: flex;
|
|
gap: var(--tn-spacing-lg);
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-top: var(--tn-spacing-xxl);
|
|
padding-top: var(--tn-spacing-lg);
|
|
border-top: 1px solid var(--tn-border-color);
|
|
}
|
|
|
|
/* Buttons use shared tn-btn system; no modal-specific overrides here */
|
|
|
|
/* Tertiary Button (Open note, etc.) */
|
|
.tasknotes-plugin .modal-form__button--tertiary {
|
|
background: transparent;
|
|
color: var(--tn-interactive-accent);
|
|
border: none;
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--tertiary:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-interactive-accent-hover);
|
|
}
|
|
|
|
/* Quick Date Buttons */
|
|
.tasknotes-plugin .modal-form__quick-actions {
|
|
display: flex;
|
|
gap: var(--tn-spacing-md);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
background: var(--tn-bg-secondary);
|
|
color: var(--tn-text-normal);
|
|
border: 1px solid var(--tn-border-color);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date--clear {
|
|
background: var(--tn-bg-primary);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date--clear:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
|
|
|
|
/* =====================================================================
|
|
QUICK DATE MODALS SPECIFIC
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .due-date-modal__task-title,
|
|
.tasknotes-plugin .scheduled-date-modal__task-title {
|
|
font-size: var(--tn-font-size-md);
|
|
color: var(--tn-text-normal);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
background: var(--tn-bg-secondary);
|
|
border: 1px solid var(--tn-border-color);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
TASK SELECTOR MODAL SPECIFIC
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .task-selector-modal__suggestion {
|
|
padding: var(--tn-spacing-md);
|
|
border-radius: var(--tn-radius-sm);
|
|
border-inline-start: 1px solid transparent;
|
|
transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__suggestion:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__title {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
color: var(--tn-text-normal);
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--completed {
|
|
text-decoration: line-through;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--high-priority {
|
|
color: var(--tn-color-error);
|
|
border-left-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__task-title--low-priority {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-secondary);
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date--overdue {
|
|
background: rgba(var(--tn-color-error), 0.1);
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__due-date--today {
|
|
background: rgba(var(--tn-color-warning), 0.1);
|
|
color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__contexts {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__context-tag {
|
|
padding: 1px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
background: var(--tn-bg-secondary);
|
|
font-size: var(--tn-font-size-xs);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .task-selector-modal__status {
|
|
padding: 2px var(--tn-spacing-xs);
|
|
border-radius: var(--tn-radius-sm);
|
|
font-size: var(--tn-font-size-xs);
|
|
text-transform: capitalize;
|
|
background: var(--tn-bg-secondary);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ERROR STATES
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .modal-form__error {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
margin: var(--tn-spacing-md) 0;
|
|
background: rgba(var(--tn-color-error), 0.1);
|
|
border: 1px solid var(--tn-color-error);
|
|
border-radius: var(--tn-radius-sm);
|
|
color: var(--tn-color-error);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
/* =====================================================================
|
|
RESPONSIVE DESIGN
|
|
===================================================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.tasknotes-plugin .due-date-modal,
|
|
.tasknotes-plugin .scheduled-date-modal {
|
|
padding: var(--tn-spacing-lg);
|
|
max-width: 92vw;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__buttons {
|
|
flex-direction: column;
|
|
gap: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__days-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__quick-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .modal-form__button--quick-date {
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
ACCESSIBILITY ENHANCEMENTS
|
|
===================================================================== */
|
|
|
|
/* Focus styles are defined above - removed duplicate conflicting rules */
|
|
|
|
/* Screen reader only text */
|
|
.tasknotes-plugin .modal-form__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;
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS NOTE CREATION MODAL
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-note-creation-modal {
|
|
width: 600px;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-preview {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin-bottom: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-preview h3 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details > div {
|
|
margin-bottom: var(--size-4-1);
|
|
font-size: var(--tn-font-size-md);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Align all modal setting controls to the right edge of the column */
|
|
.tasknotes-plugin .modal .setting-item .setting-item-control {
|
|
flex: none;
|
|
text-align: end;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .content-type-selector .setting-item-control {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button {
|
|
padding: var(--size-4-1) var(--size-4-3);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
color: var(--tn-text-normal);
|
|
cursor: var(--cursor-link, pointer);
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .content-type-buttons button.mod-cta {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .content-preview {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
margin: var(--size-4-3) 0;
|
|
}
|
|
|
|
.tasknotes-plugin .content-preview h4 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .preview-details > div {
|
|
margin-bottom: var(--size-4-1);
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variables {
|
|
margin-top: var(--size-4-3);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variables h5 {
|
|
margin: 0 0 var(--size-4-2) 0;
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.tasknotes-plugin .variables-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .template-variable {
|
|
background: var(--background-modifier-border);
|
|
color: var(--tn-text-muted);
|
|
padding: 2px var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--tn-font-size-sm);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.tasknotes-plugin .modal-button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--size-4-2);
|
|
margin-top: var(--size-4-4);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS EVENT INFO MODAL
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-event-info-modal {
|
|
width: 700px;
|
|
max-width: 95vw;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal .modal-content {
|
|
padding: var(--size-4-4);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tasknotes-plugin .ics-event-info-modal .modal-header h2 {
|
|
margin: 0 0 var(--size-4-4) 0;
|
|
color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section,
|
|
.tasknotes-plugin .related-notes-section,
|
|
.tasknotes-plugin .action-buttons-section {
|
|
margin-bottom: var(--size-4-4);
|
|
padding-bottom: var(--size-4-3);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section:last-of-type,
|
|
.tasknotes-plugin .related-notes-section:last-of-type,
|
|
.tasknotes-plugin .action-buttons-section:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-section h3,
|
|
.tasknotes-plugin .related-notes-section h3,
|
|
.tasknotes-plugin .action-buttons-section h3 {
|
|
margin: 0 0 var(--size-4-3) 0;
|
|
font-size: var(--tn-font-size-lg);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .event-details-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--size-4-2);
|
|
font-size: var(--tn-font-size-md);
|
|
margin-bottom: var(--size-4-2);
|
|
line-height: 1.4;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row strong {
|
|
min-width: 120px;
|
|
flex-shrink: 0;
|
|
color: var(--tn-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row span {
|
|
flex: 1;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.tasknotes-plugin .detail-row.description-row {
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .description-content {
|
|
background: var(--background-secondary);
|
|
padding: var(--size-4-2);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
font-style: italic;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .external-link {
|
|
color: var(--interactive-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tasknotes-plugin .external-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .empty-state {
|
|
text-align: center;
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
padding: var(--size-4-4);
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.tasknotes-plugin .related-notes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .related-note-item {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-4-3);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.tasknotes-plugin .related-note-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .note-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
|
|
.tasknotes-plugin .note-icon {
|
|
font-size: var(--tn-font-size-lg);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tasknotes-plugin .note-header .internal-link {
|
|
color: var(--tn-text-normal);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .note-header .internal-link:hover {
|
|
color: var(--interactive-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .note-metadata {
|
|
display: flex;
|
|
gap: var(--size-4-2);
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .note-status,
|
|
.tasknotes-plugin .note-priority {
|
|
background: var(--background-modifier-border);
|
|
padding: 2px var(--size-4-1);
|
|
border-radius: var(--radius-s);
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-2);
|
|
}
|
|
|
|
|
|
.tasknotes-plugin .close-button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: var(--size-4-4);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* =====================================================================
|
|
ICS NOTE LINK MODAL (Fuzzy Selector)
|
|
===================================================================== */
|
|
|
|
.tasknotes-plugin .ics-note-link-suggestion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-1);
|
|
padding: var(--size-4-2);
|
|
}
|
|
|
|
.tasknotes-plugin .note-link-name {
|
|
font-weight: 500;
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .note-link-path {
|
|
font-size: var(--tn-font-size-sm);
|
|
color: var(--tn-text-muted);
|
|
font-style: italic;
|
|
}
|