callumalpass_tasknotes/styles/task-inline-widget.css

/* =================================================================
   INLINE TASK WIDGET STYLES - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All inline task widget styles are scoped under .tasknotes-plugin for proper isolation */

/* =================================================================
   INLINE TASK PREVIEW STYLES (Editor Widgets)
   ================================================================= */

/* Standalone inline task preview widget */
.tasknotes-plugin .task-inline-preview {
    /* Layout - inline flexbox for proper element alignment */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;

    /* Typography - match editor font */
    font-size: var(--editor-font-size, 16px);
    font-family: var(--editor-font-family, var(--font-interface));

    /* Visual styling - clean text appearance */
    padding: 2px 4px;

    /* Interactivity */
    cursor: pointer;

    /* Prevent text selection issues */
    user-select: none;
    -webkit-user-select: none;

    /* Ensure proper vertical alignment with text */
    vertical-align: baseline;
    line-height: 1.4;
}

/* Hide when cursor is on the same line */
.tasknotes-plugin .task-inline-preview.task-inline-preview--cursor-hidden {
    display: none;
}


/* Status indicator dot - match task card styling */
.tasknotes-plugin .task-inline-preview__status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--tn-border-color);
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-right: 6px; /* More gap between status and priority */
    transform: translateY(2px); /* Lower the status circle slightly for better visual alignment */
}

.tasknotes-plugin .task-inline-preview__status-dot:hover {
    border-color: var(--tn-text-muted);
    box-shadow: 0 0 6px rgba(100, 149, 237, 0.4);
    transform: translateY(2px) scale(1.1); /* Maintain the lowered position while scaling */
}

/* Priority indicator dot - filled solid circle */
.tasknotes-plugin .task-inline-preview__priority-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--tn-text-muted);
    border: none;
    flex-shrink: 0;
    margin-right: 6px; /* Gap between priority and title */
    cursor: pointer;
}

/* Date info styling */
.tasknotes-plugin .task-inline-preview__date {
    opacity: 0.7;
    font-size: 0.9em;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
}

/* Clickable date styling */
.tasknotes-plugin .task-inline-preview__date--clickable {
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
}

.tasknotes-plugin .task-inline-preview__date--clickable:hover {
    opacity: 1;
    background-color: var(--background-modifier-hover);
    transform: translateY(-1px);
}

/* Date icon styling */
.tasknotes-plugin .task-inline-preview__date-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    margin-right: 6px;
    transition: opacity 0.15s ease;
    vertical-align: baseline;
}

/* Fix Lucide icon alignment within date icons */
.tasknotes-plugin .task-inline-preview__date-icon svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview__date--clickable:hover .task-inline-preview__date-icon {
    opacity: 1;
    filter: brightness(1.3);
}

/* Recurring indicator styling */
.tasknotes-plugin .task-inline-preview__recurring-indicator {
    opacity: 0.6;
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
    margin-right: 2px;
}

/* Fix Lucide icon alignment within recurring indicator */
.tasknotes-plugin .task-inline-preview__recurring-indicator svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__recurring-indicator {
    opacity: 0.8;
}

.tasknotes-plugin .task-inline-preview__recurring-indicator:hover {
    opacity: 1;
    color: var(--interactive-accent);
    transform: translateY(-1px);
    filter: brightness(1.3);
}

/* Pencil icon styling */
.tasknotes-plugin .task-inline-preview__pencil {
    opacity: 0;
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
}

/* Fix Lucide icon alignment within pencil icon */
.tasknotes-plugin .task-inline-preview__pencil svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__pencil {
    opacity: 0.8;
}

.tasknotes-plugin .task-inline-preview__pencil:hover {
    opacity: 1;
    transform: translateY(-1px);
    filter: brightness(1.3);
}

/* Hover state */
.tasknotes-plugin .task-inline-preview:hover {
    background-color: var(--background-modifier-hover);
}

/* Completed task styling with maximum specificity */
.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed span.task-inline-preview__title,
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed .task-inline-preview__title,
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title {
    text-decoration: line-through;
    opacity: 0.7;
    color: var(--text-muted);
}

/* Completed task title hover effect */
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title:hover {
    color: var(--interactive-accent);
    opacity: 0.9;
}

.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin .task-inline-preview--completed {
    opacity: 0.8;
}

/* =================================================================
   INSTANT CONVERT BUTTON STYLES
   ================================================================= */

/* Convert button for checkbox tasks - High specificity to override browser defaults */
.tasknotes-plugin button.instant-convert-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Sizing */
    width: 15px;
    height: 15px;
    margin-left: 8px;
    padding: 0;
    
    /* Visual styling */
    background: transparent;
    color: var(--text-muted);
    border: none !important;
    box-shadow: none;
    border-radius: 3px;
    
    /* Interactivity */
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
    
    /* Reset button styles */
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    vertical-align: baseline;
}

.tasknotes-plugin button.instant-convert-button:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tasknotes-plugin button.instant-convert-button:active {
    transform: scale(0.95);
}

.tasknotes-plugin button.instant-convert-button:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

/* Icon inside the convert button */
.tasknotes-plugin .instant-convert-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.tasknotes-plugin .instant-convert-button__icon svg {
    width: 12px;
    height: 12px;
}

/* =================================================================
   ADDITIONAL INLINE TASK PREVIEW ELEMENTS
   ================================================================= */

/* Completed status styling - filled circle with checkmark */
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__status-dot {
    background-color: var(--current-status-color, var(--tn-color-success));
    border-color: var(--current-status-color, var(--tn-color-success));
    color: var(--tn-text-on-accent);
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Task title */
.tasknotes-plugin .task-inline-preview__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    color: var(--text-normal);
    font-weight: 500;
    margin: 0;
    min-width: 0; /* Allow flex shrinking */
    max-width: 250px; /* Give more room for task titles */
    flex-shrink: 1; /* Allow shrinking if needed */
    vertical-align: baseline;
    cursor: pointer;
    transition: color 0.15s ease;
    border-radius: 2px;
    padding: 1px 2px;
    margin: -1px -2px;
}

/* Task title hover effect */
.tasknotes-plugin .task-inline-preview__title:hover {
    color: var(--interactive-accent);
    background-color: var(--background-modifier-hover);
}

/* Priority indicator */
.tasknotes-plugin .task-inline-preview__priority {
    font-weight: bold;
    font-size: 0.85em;
    flex-shrink: 0;
    margin-left: 3px;
    margin-right: 1px;
}

/* Priority border colors */
.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-high {
    border-left-color: var(--color-red);
    border-left-width: 4px;
}

.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-medium {
    border-left-color: var(--color-orange);
    border-left-width: 3px;
}

.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-low {
    border-left-color: var(--color-blue);
}

/* Pencil menu icon */
.tasknotes-plugin .task-inline-preview__menu-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    padding: 0;
    margin-left: 1px;
}

.tasknotes-plugin .task-inline-preview__menu-icon:hover {
    opacity: 1;
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__menu-icon {
    opacity: 0.8;
}

/* =================================================================
   THEME-SPECIFIC ADJUSTMENTS
   ================================================================= */

/* Theme-specific adjustments */
.theme-dark .tasknotes-plugin .task-inline-preview {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

.theme-light .tasknotes-plugin .task-inline-preview {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

/* Animation for appearance */
.tasknotes-plugin .task-inline-preview {
    animation: tn-fadeInTaskPreview 0.2s ease-out;
}

@keyframes tn-fadeInTaskPreview {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Responsive adjustments */
@media (max-width: 768px) {
    .tasknotes-plugin .task-inline-preview {
        max-width: 200px;
        padding: 2px 4px;
        gap: 6px;
        font-size: calc(var(--editor-font-size, 16px) * 0.9);
    }
    
    .tasknotes-plugin .task-inline-preview__status-dot {
        width: 16px;
        height: 16px;
    }
    
    .tasknotes-plugin .task-inline-preview__menu-icon {
        width: 14px;
        height: 14px;
    }
}

/* =================================================================
   READING MODE SPECIFIC STYLES
   ================================================================= */

/* Reading mode task preview adjustments */
.tasknotes-plugin .task-inline-preview--reading-mode {
    /* Ensure proper display in reading mode context */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Better visual integration with reading mode */
    padding: 3px 8px;
    border-radius: 4px;
    background-color: var(--background-modifier-hover);
    border: 1px solid var(--background-modifier-border);
    
    /* Smooth transitions */
    transition: all 0.15s ease;
}

.tasknotes-plugin .task-inline-preview--reading-mode:hover {
    background-color: var(--background-modifier-hover-active);
    border-color: var(--interactive-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Reading mode title styling */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__title {
    font-weight: 500;
    color: var(--text-normal);
}

/* Reading mode date styling */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date {
    font-size: 0.85em;
    opacity: 0.8;
}

/* Reading mode icon adjustments */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date-icon {
    width: 11px;
    height: 11px;
    margin-right: 3px;
}

.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__pencil {
    width: 11px;
    height: 11px;
    opacity: 0.5;
}

.tasknotes-plugin .task-inline-preview--reading-mode:hover .task-inline-preview__pencil {
    opacity: 0.9;
}

/* =================================================================
   TASK INLINE PREVIEW DRAG AND DROP STATES
   ================================================================= */

/* Dragging state for task inline preview widgets */
.tasknotes-plugin .task-inline-preview--dragging {
    opacity: 0.6;
    transform: scale(0.95);
    cursor: grabbing;
    z-index: 1000;
    pointer-events: none;
}

/* Drag cursor for draggable task inline preview widgets */
.tasknotes-plugin .task-inline-preview[draggable="true"] {
    cursor: grab;
}

.tasknotes-plugin .task-inline-preview[draggable="true"]:active {
    cursor: grabbing;
}