/* * Task Manager frontend styles. Scoped under .tm-app with a unique "tm-" class * prefix (BEM-ish) so the plugin never bleeds into or collides with the active theme. * * Tokens below use the self-referential var(--x, fallback) pattern: if an ancestor * (e.g. a companion theme's :root) already defines --tm-border etc., that inherited * value wins; otherwise the literal fallback applies. This lets a theme re-skin the * plugin from one place without the plugin depending on any particular theme. * * --tm-bg is deliberately treated as the *page's* ambient tone (a companion theme * applies it to too) while --tm-surface is the plugin's own panel/card tone. * Keeping them separate means columns and cards stay visibly distinct from the page * behind them even when a theme intentionally reuses --tm-bg for its own background — * two tokens resolving to the exact same color would otherwise make the board * invisible against its own page. */ .tm-app { --tm-border: var(--tm-border, #e2e8f0); --tm-bg: var(--tm-bg, #f8fafc); --tm-surface: var(--tm-surface, #ffffff); --tm-text: var(--tm-text, #1e293b); --tm-muted: var(--tm-muted, #64748b); --tm-accent: var(--tm-accent, #3b82f6); --tm-danger: var(--tm-danger, #ef4444); --tm-radius: var(--tm-radius, 8px); box-sizing: border-box; color: var(--tm-text); font-size: 14px; line-height: 1.5; max-width: 100%; } .tm-app *, .tm-app *::before, .tm-app *::after { box-sizing: inherit; } .tm-app [x-cloak] { display: none !important; } .tm-app button { font-family: inherit; font-size: inherit; cursor: pointer; } /* ---- shortcode-level states (login / no access) ---- */ .tm-shortcode { max-width: 420px; margin: 2rem auto; padding: 1.5rem; background: var(--tm-surface); border: 1px solid var(--tm-border, #e2e8f0); border-radius: 8px; text-align: center; } /* ---- main nav (persistent across board list / board detail; anchor for future pages) ---- */ .tm-mainnav { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--tm-border); font-size: 0.9rem; } .tm-mainnav__brand { font-weight: 700; color: var(--tm-text); text-decoration: none; } .tm-mainnav__brand:hover { color: var(--tm-accent); } .tm-mainnav__sep { color: var(--tm-muted); } .tm-mainnav__crumb { display: flex; align-items: center; gap: 0.4rem; color: var(--tm-muted); } /* ---- top bar ---- */ .tm-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .tm-topbar__title { font-size: 1.25rem; font-weight: 700; margin: 0; } .tm-topbar__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .tm-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: var(--tm-radius); border: 1px solid var(--tm-border); background: var(--tm-surface); color: var(--tm-text); } .tm-btn:hover { border-color: var(--tm-accent); } .tm-btn--primary { background: var(--tm-accent); border-color: var(--tm-accent); color: #fff; } .tm-btn--danger { color: var(--tm-danger); border-color: var(--tm-danger); } .tm-btn--sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; } /* ---- banners ---- */ .tm-banner { padding: 0.6rem 0.9rem; border-radius: var(--tm-radius); margin-bottom: 1rem; font-size: 0.9rem; } .tm-banner--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .tm-banner--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } /* ---- board list ---- */ .tm-board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } .tm-board-card { display: block; padding: 1rem; border: 1px solid var(--tm-border); border-radius: var(--tm-radius); background: var(--tm-surface); text-decoration: none; color: inherit; } .tm-board-card__name { font-weight: 600; margin: 0 0 0.25rem; } .tm-board-card__role { font-size: 0.8rem; color: var(--tm-muted); text-transform: capitalize; } /* ---- filters ---- */ .tm-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .tm-filters select, .tm-filters input[type="search"] { padding: 0.4rem 0.6rem; border: 1px solid var(--tm-border); border-radius: var(--tm-radius); font-size: 0.85rem; } /* ---- kanban board ---- */ .tm-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .tm-column { flex: 0 0 280px; scroll-snap-align: start; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); display: flex; flex-direction: column; max-height: 78vh; } .tm-column__header { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--tm-border); font-weight: 600; } .tm-column__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .tm-column__count { margin-left: auto; font-size: 0.8rem; color: var(--tm-muted); font-weight: 400; } .tm-column__count--over { color: var(--tm-danger); font-weight: 700; } .tm-column__body { padding: 0.5rem; overflow-y: auto; flex: 1; min-height: 60px; } .tm-column__add { margin: 0.5rem; text-align: left; color: var(--tm-muted); background: transparent; border: 1px dashed var(--tm-border); border-radius: var(--tm-radius); padding: 0.4rem 0.6rem; } /* ---- task card ---- */ .tm-card { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; cursor: grab; } .tm-card--dragging { opacity: 0.5; } .tm-card__title { font-weight: 600; margin: 0 0 0.35rem; word-break: break-word; } .tm-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--tm-muted); } .tm-priority { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .tm-priority--low { background: #94a3b8; } .tm-priority--normal { background: #facc15; } .tm-priority--high { background: #f97316; } .tm-priority--urgent { background: #ef4444; } .tm-card__avatar { width: 20px; height: 20px; border-radius: 50%; } .tm-card__progress { font-size: 0.75rem; background: var(--tm-bg); border-radius: 999px; padding: 0.1rem 0.45rem; } /* ---- task detail modal ---- */ .tm-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; z-index: 100000; overflow-y: auto; } .tm-modal { background: var(--tm-surface); border-radius: var(--tm-radius); width: 100%; max-width: 640px; padding: 1.25rem; } .tm-modal__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .tm-field { margin-bottom: 0.85rem; } .tm-field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--tm-muted); } .tm-field input[type="text"], .tm-field input[type="datetime-local"], .tm-field select, .tm-field textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--tm-border); border-radius: var(--tm-radius); font-family: inherit; font-size: 0.9rem; } .tm-field textarea { min-height: 100px; resize: vertical; } .tm-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--tm-border); margin-bottom: 0.85rem; } .tm-tabs__btn { padding: 0.5rem 0.8rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--tm-muted); } .tm-tabs__btn--active { color: var(--tm-accent); border-color: var(--tm-accent); font-weight: 600; } .tm-comment { padding: 0.5rem 0; border-bottom: 1px solid var(--tm-border); } .tm-comment__meta { font-size: 0.78rem; color: var(--tm-muted); margin-bottom: 0.2rem; } .tm-activity-item { font-size: 0.82rem; color: var(--tm-muted); padding: 0.3rem 0; border-bottom: 1px dashed var(--tm-border); } /* ---- tree view ---- */ .tm-tree { margin-top: 1.5rem; border-top: 1px solid var(--tm-border); padding-top: 1rem; } .tm-tree__item { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; } .tm-tree__toggle { background: none; border: none; width: 1.2rem; color: var(--tm-muted); } .tm-tree__link { color: var(--tm-accent); background: none; border: none; text-align: left; padding: 0; } /* ---- responsive: swipeable columns on small screens ---- */ @media (max-width: 640px) { .tm-board { scroll-snap-type: x mandatory; } .tm-column { flex: 0 0 88vw; } .tm-topbar { flex-direction: column; align-items: stretch; } } /* ---- dark theme support (only applied if the active theme opts in) ---- */ @media (prefers-color-scheme: dark) { .tm-app.tm-app--auto-theme { --tm-border: var(--tm-border, #334155); --tm-bg: var(--tm-bg, #1e293b); /* Not var(--tm-surface, #0f172a) here: --tm-surface has no ancestor value to * inherit (unlike --tm-bg/--tm-border, which the companion theme's :root also * declares), and this selector already competes with .tm-app's own unconditional * --tm-surface declaration for the exact same element. Two self-referencing * declarations of the same custom property on one element is unreliable across * browsers — it was staying stuck on the light fallback. A plain literal sidesteps * the ambiguity entirely. */ --tm-surface: #0f172a; --tm-text: var(--tm-text, #e2e8f0); --tm-muted: var(--tm-muted, #94a3b8); } }