mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
Tighten CSS linting and selector scopes
This commit is contained in:
callumalpass
parent
469b04e3af
commit
d60ceace4b
10 changed files with 304 additions and 123 deletions
|
|
@ -27,4 +27,5 @@ Example:
|
|||
## Fixed
|
||||
|
||||
- Made the markdown editor areas in task modals easier to click and focus.
|
||||
- Strengthened local CSS linting to catch unscoped selectors, unknown CSS, and fixed-position overlays before review.
|
||||
- Reduced false-positive plugin review warnings by making background auto-export and auto-archive schedulers non-overlapping and tightening type/string conversion paths.
|
||||
|
|
|
|||
|
|
@ -121,7 +121,9 @@ export class TaskCreationModal extends TaskModal {
|
|||
const nlContainer = container.createDiv("nl-input-container");
|
||||
|
||||
// Create markdown editor container
|
||||
const editorContainer = nlContainer.createDiv("nl-markdown-editor");
|
||||
const editorContainer = nlContainer.createDiv(
|
||||
"tn-task-modal__markdown-editor tn-task-modal__markdown-editor--nlp"
|
||||
);
|
||||
editorContainer.setAttribute("role", "textbox");
|
||||
editorContainer.setAttribute("aria-label", this.t("modals.taskCreation.nlPlaceholder"));
|
||||
editorContainer.setAttribute("aria-multiline", "true");
|
||||
|
|
@ -310,7 +312,7 @@ export class TaskCreationModal extends TaskModal {
|
|||
}
|
||||
|
||||
protected createActionBar(container: HTMLElement): void {
|
||||
this.actionBar = container.createDiv("action-bar");
|
||||
this.actionBar = container.createDiv("tn-task-modal__action-bar");
|
||||
|
||||
// NLP-specific icons (only if NLP is enabled)
|
||||
if (this.plugin.settings.enableNaturalLanguageInput) {
|
||||
|
|
|
|||
|
|
@ -633,11 +633,13 @@ export class TaskEditModal extends TaskModal {
|
|||
}
|
||||
|
||||
protected createActionButtons(container: HTMLElement): void {
|
||||
const buttonContainer = container.createDiv("modal-button-container");
|
||||
const buttonContainer = container.createDiv(
|
||||
"modal-button-container tn-task-modal__button-bar"
|
||||
);
|
||||
|
||||
// Add "Open note" button
|
||||
const openNoteButton = buttonContainer.createEl("button", {
|
||||
cls: "open-note-button",
|
||||
cls: "tn-task-modal__open-note-button",
|
||||
text: this.t("modals.task.buttons.openNote"),
|
||||
});
|
||||
|
||||
|
|
@ -647,7 +649,7 @@ export class TaskEditModal extends TaskModal {
|
|||
|
||||
// Add "Archive" button
|
||||
const archiveButton = buttonContainer.createEl("button", {
|
||||
cls: "mod-warning archive-button",
|
||||
cls: "mod-warning tn-task-modal__archive-button",
|
||||
text: this.task.archived
|
||||
? this.t("modals.taskEdit.buttons.unarchive")
|
||||
: this.t("modals.taskEdit.buttons.archive"),
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ export abstract class TaskModal extends Modal {
|
|||
}
|
||||
|
||||
protected createActionBar(container: HTMLElement): void {
|
||||
this.actionBar = container.createDiv("action-bar");
|
||||
this.actionBar = container.createDiv("tn-task-modal__action-bar");
|
||||
|
||||
// Due date icon
|
||||
this.createActionIcon(
|
||||
|
|
@ -669,7 +669,9 @@ export abstract class TaskModal extends Modal {
|
|||
detailsLabel.textContent = this.t("modals.task.detailsLabel");
|
||||
|
||||
// Create container for the markdown editor
|
||||
const detailsEditorContainer = rightColumn.createDiv("details-markdown-editor");
|
||||
const detailsEditorContainer = rightColumn.createDiv(
|
||||
"tn-task-modal__markdown-editor tn-task-modal__markdown-editor--details"
|
||||
);
|
||||
|
||||
// Create embeddable markdown editor for details using shared method
|
||||
this.detailsMarkdownEditor = createTaskModalMarkdownEditor(
|
||||
|
|
@ -949,10 +951,10 @@ export abstract class TaskModal extends Modal {
|
|||
|
||||
// Add a section separator if there are user fields
|
||||
if (userFieldConfigs.length > 0) {
|
||||
const separator = container.createDiv({ cls: "user-fields-separator" });
|
||||
const separator = container.createDiv({ cls: "tn-task-modal__user-fields" });
|
||||
separator.createDiv({
|
||||
text: this.t("modals.task.customFieldsLabel"),
|
||||
cls: "detail-label-section",
|
||||
cls: "tn-task-modal__section-label",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1073,12 +1075,14 @@ export abstract class TaskModal extends Modal {
|
|||
}
|
||||
|
||||
protected createActionButtons(container: HTMLElement): void {
|
||||
const buttonContainer = container.createDiv("modal-button-container");
|
||||
const buttonContainer = container.createDiv(
|
||||
"modal-button-container tn-task-modal__button-bar"
|
||||
);
|
||||
|
||||
// Add "Open note" button for edit modals only
|
||||
if (this.isEditMode()) {
|
||||
const openNoteButton = buttonContainer.createEl("button", {
|
||||
cls: "open-note-button",
|
||||
cls: "tn-task-modal__open-note-button",
|
||||
text: this.t("modals.task.buttons.openNote"),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import stylelint from "stylelint";
|
||||
import selectorParser from "postcss-selector-parser";
|
||||
|
||||
const { createPlugin, utils } = stylelint;
|
||||
|
||||
const noHasRuleName = "tasknotes/no-has";
|
||||
const obsidianBrowserSupportRuleName = "tasknotes/obsidian-browser-support";
|
||||
const scopedSelectorsRuleName = "tasknotes/scoped-selectors";
|
||||
const noFixedPositionRuleName = "tasknotes/no-fixed-position";
|
||||
|
||||
const noHasRule = createPlugin(noHasRuleName, (enabled) => {
|
||||
return (root, result) => {
|
||||
|
|
@ -96,10 +99,221 @@ const obsidianBrowserSupportRule = createPlugin(
|
|||
}
|
||||
);
|
||||
|
||||
const ownedSelectorPatterns = [
|
||||
/^tasknotes(?:-|$)/u,
|
||||
/^task-/u,
|
||||
/^tn-/u,
|
||||
/^nlp-/u,
|
||||
/^advanced-calendar-view(?:__|$)/u,
|
||||
/^agenda-view(?:__|$)/u,
|
||||
/^calendar-view(?:__|$)/u,
|
||||
/^mini-calendar-view(?:__|$)/u,
|
||||
/^kanban-view(?:__|$)/u,
|
||||
/^filter-(?:bar|heading|toggle)/u,
|
||||
/^note-card(?:__|$)/u,
|
||||
/^pomodoro(?:-|$)/u,
|
||||
/^stats-view(?:__|$)/u,
|
||||
/^status-bar$/u,
|
||||
/^modal-form(?:__|$)/u,
|
||||
/^date-picker(?:__|$)/u,
|
||||
/^file-selector/u,
|
||||
/^unscheduled-tasks-selector/u,
|
||||
/^reminder-/u,
|
||||
/^time-entry-editor/u,
|
||||
/^webhook-/u,
|
||||
/^ics-/u,
|
||||
/^base-/u,
|
||||
/^bases-/u,
|
||||
/^fc-/u,
|
||||
/^timeblock-/u,
|
||||
/^attachment-/u,
|
||||
/^settings-status-indicator$/u,
|
||||
/^date-picker-/u,
|
||||
/^mini-calendar-note-preview$/u,
|
||||
/^preview-/u,
|
||||
/^autocomplete-/u,
|
||||
/^hide-today-highlight$/u,
|
||||
/^filter-date-help-tooltip$/u,
|
||||
/^no-reminders$/u,
|
||||
/^default-projects-list-container$/u,
|
||||
/^field-mapping-input$/u,
|
||||
/^icon-suggestion-/u,
|
||||
/^google-calendar-/u,
|
||||
/^microsoft-calendar-/u,
|
||||
/^cm-widget-cursor-fix$/u,
|
||||
/^cm-content$/u,
|
||||
];
|
||||
|
||||
const allowedGlobalContextClasses = new Set([
|
||||
"theme-dark",
|
||||
"theme-light",
|
||||
"is-mobile",
|
||||
"is-readable-line-width",
|
||||
"mod-tasknotes",
|
||||
"minimalist-task-modal",
|
||||
"suggestion-item",
|
||||
"modal",
|
||||
]);
|
||||
|
||||
const scopedContextClasses = new Set(["mod-tasknotes"]);
|
||||
|
||||
const allowedHostClassesInScopedContext = new Set([
|
||||
"modal",
|
||||
"modal-button-container",
|
||||
"mod-cta",
|
||||
]);
|
||||
|
||||
const ignoredSelectorFiles = new Set([
|
||||
"variables.css",
|
||||
"static-style-utilities.css",
|
||||
"index.css",
|
||||
]);
|
||||
|
||||
function isOwnedClassOrId(name) {
|
||||
return ownedSelectorPatterns.some((pattern) => pattern.test(name));
|
||||
}
|
||||
|
||||
function isScopedSelector(selectorNode) {
|
||||
let hasOwnedSelector = false;
|
||||
let hasOnlyAllowedGlobals = true;
|
||||
let hasClassOrId = false;
|
||||
let hasScopedContext = false;
|
||||
let hasOnlyScopedContextHostClasses = true;
|
||||
|
||||
selectorNode.walk((node) => {
|
||||
if (node.type !== "class" && node.type !== "id") {
|
||||
return;
|
||||
}
|
||||
|
||||
hasClassOrId = true;
|
||||
|
||||
if (isOwnedClassOrId(node.value)) {
|
||||
hasOwnedSelector = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (scopedContextClasses.has(node.value)) {
|
||||
hasScopedContext = true;
|
||||
}
|
||||
|
||||
if (!allowedGlobalContextClasses.has(node.value)) {
|
||||
hasOnlyAllowedGlobals = false;
|
||||
}
|
||||
|
||||
if (
|
||||
!scopedContextClasses.has(node.value) &&
|
||||
!allowedHostClassesInScopedContext.has(node.value) &&
|
||||
!allowedGlobalContextClasses.has(node.value)
|
||||
) {
|
||||
hasOnlyScopedContextHostClasses = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (hasOwnedSelector) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (hasScopedContext && hasOnlyScopedContextHostClasses) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return !hasClassOrId && hasOnlyAllowedGlobals;
|
||||
}
|
||||
|
||||
const scopedSelectorsRule = createPlugin(scopedSelectorsRuleName, (enabled) => {
|
||||
return (root, result) => {
|
||||
if (!enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = root.source?.input?.file ?? "";
|
||||
const fileName = filePath.split(/[\\/]/u).pop() ?? "";
|
||||
|
||||
if (
|
||||
!filePath.includes("/styles/") ||
|
||||
filePath.includes("/docs-builder/") ||
|
||||
ignoredSelectorFiles.has(fileName)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.walkRules((ruleNode) => {
|
||||
if (ruleNode.parent?.type === "atrule" && ruleNode.parent.name === "keyframes") {
|
||||
return;
|
||||
}
|
||||
|
||||
let parsedSelector;
|
||||
try {
|
||||
parsedSelector = selectorParser().astSync(ruleNode.selector);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedSelector.each((selectorNode) => {
|
||||
if (isScopedSelector(selectorNode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
utils.report({
|
||||
message:
|
||||
"Scope plugin CSS with a TaskNotes-owned selector or an explicit allowed global context.",
|
||||
node: ruleNode,
|
||||
result,
|
||||
ruleName: scopedSelectorsRuleName,
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
const fixedPositionAllowSelectors = [
|
||||
/date-picker-modal/u,
|
||||
/stats-view__modal-backdrop/u,
|
||||
/tn-selection-indicator/u,
|
||||
/tn-fixed/u,
|
||||
];
|
||||
|
||||
const noFixedPositionRule = createPlugin(noFixedPositionRuleName, (enabled) => {
|
||||
return (root, result) => {
|
||||
if (!enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = root.source?.input?.file ?? "";
|
||||
if (filePath.includes("/docs-builder/")) {
|
||||
return;
|
||||
}
|
||||
|
||||
root.walkDecls("position", (declaration) => {
|
||||
if (declaration.value.toLowerCase() !== "fixed") {
|
||||
return;
|
||||
}
|
||||
|
||||
const selector = declaration.parent?.selector ?? "";
|
||||
if (fixedPositionAllowSelectors.some((pattern) => pattern.test(selector))) {
|
||||
return;
|
||||
}
|
||||
|
||||
utils.report({
|
||||
message:
|
||||
"Avoid fixed positioning in plugin CSS unless there is a narrowly reviewed exception.",
|
||||
node: declaration,
|
||||
result,
|
||||
ruleName: noFixedPositionRuleName,
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
const warning = { severity: "warning" };
|
||||
|
||||
export default {
|
||||
plugins: [noHasRule, obsidianBrowserSupportRule],
|
||||
plugins: [
|
||||
noHasRule,
|
||||
obsidianBrowserSupportRule,
|
||||
scopedSelectorsRule,
|
||||
noFixedPositionRule,
|
||||
],
|
||||
rules: {
|
||||
"color-hex-length": [
|
||||
"long",
|
||||
|
|
@ -118,7 +332,24 @@ export default {
|
|||
},
|
||||
],
|
||||
"no-duplicate-selectors": [true, warning],
|
||||
"property-no-unknown": [true, warning],
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
...warning,
|
||||
ignorePseudoClasses: ["global"],
|
||||
},
|
||||
],
|
||||
"selector-type-no-unknown": [
|
||||
true,
|
||||
{
|
||||
...warning,
|
||||
ignoreTypes: ["pro"],
|
||||
},
|
||||
],
|
||||
[noHasRuleName]: [true, warning],
|
||||
[obsidianBrowserSupportRuleName]: [true, warning],
|
||||
[scopedSelectorsRuleName]: [true, warning],
|
||||
[noFixedPositionRuleName]: [true, warning],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -168,7 +168,6 @@
|
|||
border: 1px solid var(--tn-border-color);
|
||||
border-radius: var(--tn-radius-sm);
|
||||
overflow: hidden;
|
||||
role: grid;
|
||||
}
|
||||
|
||||
/* Calendar Grid Header Row */
|
||||
|
|
@ -178,7 +177,6 @@
|
|||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--tn-bg-secondary);
|
||||
role: row;
|
||||
}
|
||||
|
||||
/* Calendar Week Row */
|
||||
|
|
@ -187,7 +185,6 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
role: row;
|
||||
}
|
||||
|
||||
/* Calendar Day Header (Sun, Mon, etc.) */
|
||||
|
|
@ -202,7 +199,6 @@
|
|||
color: var(--tn-text-muted);
|
||||
background: var(--tn-bg-secondary);
|
||||
border: none;
|
||||
role: columnheader;
|
||||
}
|
||||
|
||||
/* Calendar Day Cell - consistent styling */
|
||||
|
|
@ -222,7 +218,6 @@
|
|||
transition: all var(--tn-transition-fast);
|
||||
font-size: var(--tn-font-size-sm);
|
||||
font-weight: 500;
|
||||
role: gridcell;
|
||||
}
|
||||
|
||||
.tasknotes-plugin .calendar-view__day:hover,
|
||||
|
|
|
|||
|
|
@ -25,8 +25,6 @@
|
|||
cursor: var(--cursor, pointer);
|
||||
transition: background-color var(--tn-transition-fast);
|
||||
outline: none;
|
||||
role: listitem;
|
||||
tabindex: 0;
|
||||
}
|
||||
|
||||
.tasknotes-plugin .note-card:hover {
|
||||
|
|
@ -335,4 +333,3 @@
|
|||
font-size: var(--tn-font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -563,16 +563,6 @@
|
|||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Modal button styling */
|
||||
.modal-button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--size-4-2);
|
||||
margin-top: var(--size-4-6);
|
||||
padding-top: var(--size-4-4);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
REMINDER DEFAULTS SECTION - Settings Tab Styling
|
||||
===================================================================== */
|
||||
|
|
@ -831,4 +821,4 @@
|
|||
|
||||
.tasknotes-plugin .reminder-defaults-add-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@
|
|||
/* Interactions & Accessibility - Smooth transitions */
|
||||
transition: all var(--tn-transition-fast);
|
||||
outline: none;
|
||||
role: listitem;
|
||||
tabindex: 0;
|
||||
}
|
||||
|
||||
.tasknotes-plugin .task-card:hover {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
EMBEDDABLE MARKDOWN EDITOR
|
||||
===================================================================== */
|
||||
|
||||
.details-markdown-editor {
|
||||
.tn-task-modal__markdown-editor--details {
|
||||
margin-bottom: var(--size-4-3);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-s);
|
||||
|
|
@ -24,20 +24,20 @@
|
|||
max-height: 400px;
|
||||
}
|
||||
|
||||
.details-markdown-editor .task-details-editor {
|
||||
.tn-task-modal__markdown-editor--details .task-details-editor {
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Make the editor container scrollable */
|
||||
.details-markdown-editor .cm-editor {
|
||||
.tn-task-modal__markdown-editor--details .cm-editor {
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.details-markdown-editor .cm-scroller {
|
||||
.tn-task-modal__markdown-editor--details .cm-scroller {
|
||||
overflow: auto;
|
||||
min-height: inherit;
|
||||
height: 100%;
|
||||
|
|
@ -45,22 +45,22 @@
|
|||
cursor: text;
|
||||
}
|
||||
|
||||
.details-markdown-editor .cm-sizer,
|
||||
.details-markdown-editor .cm-contentContainer,
|
||||
.details-markdown-editor .cm-content {
|
||||
.tn-task-modal__markdown-editor--details .cm-sizer,
|
||||
.tn-task-modal__markdown-editor--details .cm-contentContainer,
|
||||
.tn-task-modal__markdown-editor--details .cm-content {
|
||||
box-sizing: border-box;
|
||||
min-height: inherit;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-markdown-editor .cm-sizer,
|
||||
.details-markdown-editor .cm-contentContainer {
|
||||
.tn-task-modal__markdown-editor--details .cm-sizer,
|
||||
.tn-task-modal__markdown-editor--details .cm-contentContainer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Style the editor content */
|
||||
.details-markdown-editor .cm-content {
|
||||
.tn-task-modal__markdown-editor--details .cm-content {
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
padding-top: var(--size-4-2);
|
||||
|
|
@ -71,18 +71,18 @@
|
|||
caret-color: var(--text-normal);
|
||||
}
|
||||
|
||||
.details-markdown-editor .cm-cursor,
|
||||
.details-markdown-editor .cm-dropCursor {
|
||||
.tn-task-modal__markdown-editor--details .cm-cursor,
|
||||
.tn-task-modal__markdown-editor--details .cm-dropCursor {
|
||||
border-left-color: var(--text-normal);
|
||||
}
|
||||
|
||||
.details-markdown-editor .cm-lineNumbers,
|
||||
.details-markdown-editor .cm-gutters {
|
||||
.tn-task-modal__markdown-editor--details .cm-lineNumbers,
|
||||
.tn-task-modal__markdown-editor--details .cm-gutters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Placeholder styling */
|
||||
.details-markdown-editor .cm-placeholder {
|
||||
.tn-task-modal__markdown-editor--details .cm-placeholder {
|
||||
color: var(--text-faint);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
NLP MARKDOWN EDITOR
|
||||
===================================================================== */
|
||||
|
||||
.nl-markdown-editor {
|
||||
.tn-task-modal__markdown-editor--nlp {
|
||||
margin-bottom: var(--size-4-2);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-s);
|
||||
|
|
@ -102,13 +102,13 @@
|
|||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .nlp-editor {
|
||||
.tn-task-modal__markdown-editor--nlp .nlp-editor {
|
||||
min-height: 80px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-editor {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-editor {
|
||||
height: 100%;
|
||||
min-height: 80px;
|
||||
max-height: 200px;
|
||||
|
|
@ -117,17 +117,17 @@
|
|||
}
|
||||
|
||||
/* Focus state for NLP editor - match old nl-input styling */
|
||||
.nl-markdown-editor:focus-within {
|
||||
.tn-task-modal__markdown-editor--nlp:focus-within {
|
||||
border-color: var(--interactive-accent);
|
||||
background: transparent;
|
||||
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
||||
}
|
||||
|
||||
.nl-markdown-editor:focus-within .cm-editor {
|
||||
.tn-task-modal__markdown-editor--nlp:focus-within .cm-editor {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-scroller {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-scroller {
|
||||
overflow: auto;
|
||||
min-height: inherit;
|
||||
height: 100%;
|
||||
|
|
@ -135,21 +135,21 @@
|
|||
cursor: text;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-sizer,
|
||||
.nl-markdown-editor .cm-contentContainer,
|
||||
.nl-markdown-editor .cm-content {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-sizer,
|
||||
.tn-task-modal__markdown-editor--nlp .cm-contentContainer,
|
||||
.tn-task-modal__markdown-editor--nlp .cm-content {
|
||||
box-sizing: border-box;
|
||||
min-height: inherit;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-sizer,
|
||||
.nl-markdown-editor .cm-contentContainer {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-sizer,
|
||||
.tn-task-modal__markdown-editor--nlp .cm-contentContainer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-content {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-content {
|
||||
padding-left: var(--size-4-2);
|
||||
padding-right: var(--size-4-2);
|
||||
padding-top: var(--size-4-3);
|
||||
|
|
@ -160,18 +160,18 @@
|
|||
caret-color: var(--text-normal);
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-cursor,
|
||||
.nl-markdown-editor .cm-dropCursor {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-cursor,
|
||||
.tn-task-modal__markdown-editor--nlp .cm-dropCursor {
|
||||
border-left-color: var(--text-normal);
|
||||
}
|
||||
|
||||
.nl-markdown-editor .cm-lineNumbers,
|
||||
.nl-markdown-editor .cm-gutters {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-lineNumbers,
|
||||
.tn-task-modal__markdown-editor--nlp .cm-gutters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.nl-markdown-editor .cm-placeholder {
|
||||
.tn-task-modal__markdown-editor--nlp .cm-placeholder {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -269,36 +269,14 @@
|
|||
}
|
||||
|
||||
/* Modal header with TaskNotes icon */
|
||||
.modal-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-4-2);
|
||||
margin-bottom: var(--size-4-3);
|
||||
}
|
||||
|
||||
.modal-header-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
color: var(--color-accent);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.modal-header-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* User fields section styling */
|
||||
.user-fields-separator {
|
||||
.tn-task-modal__user-fields {
|
||||
margin-top: var(--size-4-4);
|
||||
border-top: 0.5px solid var(--background-modifier-border);
|
||||
padding-top: var(--size-4-3);
|
||||
}
|
||||
|
||||
.detail-label-section {
|
||||
.tn-task-modal__section-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
|
|
@ -307,23 +285,6 @@
|
|||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.modal-header-icon .svg-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.modal-header-icon .tasknotes-simple {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.modal-header-title {
|
||||
font-size: var(--font-ui-larger);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-content {
|
||||
padding: 0;
|
||||
border-radius: var(--radius-l);
|
||||
|
|
@ -390,7 +351,7 @@
|
|||
ACTION BAR - ICON-BASED CONTROLS
|
||||
===================================================================== */
|
||||
|
||||
.tasknotes-plugin .action-bar {
|
||||
.tasknotes-plugin .tn-task-modal__action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-4-1);
|
||||
|
|
@ -554,7 +515,7 @@
|
|||
OPEN NOTE BUTTON (IN BUTTON BAR)
|
||||
===================================================================== */
|
||||
|
||||
.tasknotes-plugin .open-note-button {
|
||||
.tasknotes-plugin .tn-task-modal__open-note-button {
|
||||
padding: var(--size-4-2) var(--size-4-3);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--interactive-accent);
|
||||
|
|
@ -566,23 +527,23 @@
|
|||
min-width: 80px;
|
||||
}
|
||||
|
||||
.tasknotes-plugin .open-note-button:hover {
|
||||
.tasknotes-plugin .tn-task-modal__open-note-button:hover {
|
||||
background: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
border: 1px solid var(--interactive-accent);
|
||||
}
|
||||
|
||||
.tasknotes-plugin .open-note-button:active {
|
||||
.tasknotes-plugin .tn-task-modal__open-note-button:active {
|
||||
background: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
border: 1px solid var(--interactive-accent);
|
||||
}
|
||||
|
||||
.tasknotes-plugin .open-note-button:focus-visible {
|
||||
.tasknotes-plugin .tn-task-modal__open-note-button:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
|
||||
}
|
||||
|
||||
.tasknotes-plugin .archive-button:focus-visible {
|
||||
.tasknotes-plugin .tn-task-modal__archive-button:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
|
||||
}
|
||||
|
||||
|
|
@ -651,7 +612,7 @@ body:not(.is-mobile) .modal.mod-tasknotes .modal-button-container .mod-cta {
|
|||
padding: var(--size-4-3);
|
||||
}
|
||||
|
||||
.tasknotes-plugin .action-bar {
|
||||
.tasknotes-plugin .tn-task-modal__action-bar {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-4-2);
|
||||
}
|
||||
|
|
@ -726,12 +687,12 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
|
||||
/* Title input container - first item */
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-split-left .title-input-container,
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-split-left .nl-markdown-editor {
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-split-left .tn-task-modal__markdown-editor--nlp {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
/* Action bar - second item */
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-split-left .action-bar {
|
||||
.tasknotes-plugin.minimalist-task-modal .modal-split-left .tn-task-modal__action-bar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
|
|
@ -805,8 +766,8 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .title-input-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .nl-markdown-editor,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .action-bar,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .tn-task-modal__markdown-editor--nlp,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .tn-task-modal__action-bar,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .details-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .completions-calendar-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .metadata-container {
|
||||
|
|
@ -846,8 +807,8 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .title-input-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .nl-markdown-editor,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .action-bar,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .tn-task-modal__markdown-editor--nlp,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .tn-task-modal__action-bar,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .details-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .completions-calendar-container,
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content--right-empty .modal-split-left .metadata-container {
|
||||
|
|
@ -862,7 +823,7 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
}
|
||||
|
||||
/* Make details editor fill the right column completely */
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor {
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .tn-task-modal__markdown-editor--details {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
|
|
@ -875,7 +836,7 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-editor {
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .tn-task-modal__markdown-editor--details .cm-editor {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
|
|
@ -883,13 +844,13 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal.expanded .modal-button-co
|
|||
min-height: 320px;
|
||||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-scroller {
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .tn-task-modal__markdown-editor--details .cm-scroller {
|
||||
flex: 1;
|
||||
max-height: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .task-details-editor {
|
||||
.tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .tn-task-modal__markdown-editor--details .task-details-editor {
|
||||
max-height: none;
|
||||
flex: 1;
|
||||
min-height: 320px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue