diff --git a/main.js b/main.js index 1f0bb7c..f203d93 100644 --- a/main.js +++ b/main.js @@ -1566,43 +1566,52 @@ class LightMindMapPlugin extends obsidian.Plugin { } if (depth === 0) { - // Root node: gradient background - ctx.shadowColor = 'rgba(0,0,0,0.15)'; - ctx.shadowBlur = 12 * scale; - ctx.shadowOffsetY = 4 * scale; - - const grad = ctx.createLinearGradient(x, y, x + w, y + h); - const rootGrad = theme.rootGrad || 'linear-gradient(135deg, #6366F1, #8B5CF6 60%, #EC4899)'; - const gradColors = rootGrad.match(/#[0-9a-fA-F]{6}/g) || ['#6366F1', '#EC4899']; - grad.addColorStop(0, gradColors[0]); - grad.addColorStop(1, gradColors[gradColors.length - 1]); - - if (isDoodle) { - this._drawDoodleRect(ctx, x, y, w, h, seed); + if (isBorderless) { + const rootColor = theme.rootGrad ? (theme.rootGrad.match(/#[0-9a-fA-F]{6}/g) || ['#6366F1'])[0] : '#6366F1'; + this._drawTextToCanvas(ctx, node.text, x + 8 * scale, y + h / 2, w - 16 * scale - badgeExtra, `800 ${18 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, isDark ? '#E2E8F0' : rootColor); } else { - this._roundRect(ctx, x, y, w, h, r); - } - ctx.fillStyle = grad; - ctx.fill(); + // Root node: gradient background + ctx.shadowColor = 'rgba(0,0,0,0.15)'; + ctx.shadowBlur = 12 * scale; + ctx.shadowOffsetY = 4 * scale; - ctx.shadowColor = 'transparent'; - this._drawTextToCanvas(ctx, node.text, x + 14 * scale, y + h / 2, w - 28 * scale - badgeExtra, `bold ${16 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, '#FFFFFF'); + const grad = ctx.createLinearGradient(x, y, x + w, y + h); + const rootGrad = theme.rootGrad || 'linear-gradient(135deg, #6366F1, #8B5CF6 60%, #EC4899)'; + const gradColors = rootGrad.match(/#[0-9a-fA-F]{6}/g) || ['#6366F1', '#EC4899']; + grad.addColorStop(0, gradColors[0]); + grad.addColorStop(1, gradColors[gradColors.length - 1]); + + if (isDoodle) { + this._drawDoodleRect(ctx, x, y, w, h, seed); + } else { + this._roundRect(ctx, x, y, w, h, r); + } + ctx.fillStyle = grad; + ctx.fill(); + + ctx.shadowColor = 'transparent'; + this._drawTextToCanvas(ctx, node.text, x + 14 * scale, y + h / 2, w - 28 * scale - badgeExtra, `bold ${16 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, '#FFFFFF'); + } } else if (depth === 1) { - // Level 1: solid color background - ctx.shadowColor = 'rgba(0,0,0,0.1)'; - ctx.shadowBlur = 8 * scale; - ctx.shadowOffsetY = 2 * scale; - - if (isDoodle) { - this._drawDoodleRect(ctx, x, y, w, h, seed); + if (isBorderless) { + this._drawTextToCanvas(ctx, node.text, x + 8 * scale, y + h / 2, w - 16 * scale - badgeExtra, `700 ${14 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, isDark ? '#E2E8F0' : node.color); } else { - this._roundRect(ctx, x, y, w, h, r); - } - ctx.fillStyle = node.color; - ctx.fill(); + // Level 1: solid color background + ctx.shadowColor = 'rgba(0,0,0,0.1)'; + ctx.shadowBlur = 8 * scale; + ctx.shadowOffsetY = 2 * scale; - ctx.shadowColor = 'transparent'; - this._drawTextToCanvas(ctx, node.text, x + 12 * scale, y + h / 2, w - 24 * scale - badgeExtra, `bold ${14 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, '#FFFFFF'); + if (isDoodle) { + this._drawDoodleRect(ctx, x, y, w, h, seed); + } else { + this._roundRect(ctx, x, y, w, h, r); + } + ctx.fillStyle = node.color; + ctx.fill(); + + ctx.shadowColor = 'transparent'; + this._drawTextToCanvas(ctx, node.text, x + 12 * scale, y + h / 2, w - 24 * scale - badgeExtra, `bold ${14 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, '#FFFFFF'); + } } else if (depth === 2) { if (isBorderless) { this._drawTextToCanvas(ctx, node.text, x + 10 * scale, y + h / 2, w - 20 * scale - badgeExtra, `600 ${13 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`, isDark ? '#E2E8F0' : '#1F2937'); diff --git a/styles.css b/styles.css index 32b4a5f..e9b58ed 100644 --- a/styles.css +++ b/styles.css @@ -403,20 +403,45 @@ } /* Borderless: drop outlines, lean on background/shadow for separation */ -.lmm-overlay.lmm-node-style-borderless .lmm-node { - border-color: transparent; - border-width: 0; +.lmm-overlay.lmm-node-style-borderless .lmm-node, +.lmm-overlay.lmm-node-style-borderless .lmm-node-root, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d0, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d1, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d2, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d3, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d4, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d5, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d6 { + border: none; + background: transparent; + box-shadow: none; padding: 6px 12px; } +.lmm-overlay.lmm-node-style-borderless .lmm-node-root, +.lmm-overlay.lmm-node-style-borderless .lmm-node-d0 { + color: var(--lmm-color, #6366F1); + font-size: 20px; + font-weight: 800; + padding: 8px 4px; +} +.lmm-overlay.lmm-node-style-borderless .lmm-node-d1 { + color: var(--lmm-color); + font-weight: 700; + font-size: 15px; + padding: 6px 4px; +} .lmm-overlay.lmm-node-style-borderless .lmm-node-d2 { - background: transparent; + color: var(--lmm-theme-fg, var(--text-normal)); + font-weight: 600; + font-size: 13.5px; } .lmm-overlay.lmm-node-style-borderless .lmm-node-d3, .lmm-overlay.lmm-node-style-borderless .lmm-node-d4, .lmm-overlay.lmm-node-style-borderless .lmm-node-d5, .lmm-overlay.lmm-node-style-borderless .lmm-node-d6 { - background: transparent; - box-shadow: none; + color: var(--lmm-theme-fg, var(--text-normal)); + font-weight: 500; + font-size: 12.5px; } /* Pill: fully rounded capsule */