diff --git a/app.vue b/app.vue index f001bdc..cba0025 100644 --- a/app.vue +++ b/app.vue @@ -2,6 +2,7 @@
+
diff --git a/assets/global.css b/assets/global.css index 3569ff9..c8a4021 100644 --- a/assets/global.css +++ b/assets/global.css @@ -71,7 +71,7 @@ --footer-display: block; } -html { +:root { /* Tooltips */ --tooltip-display: none; /* Popovers */ @@ -81,7 +81,7 @@ html { /* Obsidian Publish mobile variables */ /* --------------------------------- */ @media screen and (max-width: 750px) { - html { + :root { --popover-display: none; --input-height: 36px; } @@ -99,7 +99,7 @@ html { /* Obsidian theme variables */ /* ------------------------ */ -html { +:root { /* Animations */ --anim-duration-none: 0; --anim-duration-superfast: 70ms; @@ -487,7 +487,7 @@ html { /* Popovers - file previews */ --popover-width: 450px; --popover-height: 400px; - --popover-max-height: 70vh; + --popover-max-height: 50vh; --popover-pdf-width: 600px; --popover-pdf-height: 800px; --popover-font-size: var(--font-text-size); @@ -2825,12 +2825,18 @@ body:not(.native-scrollbars) * { max-height: var(--popover-max-height); } -.popover.hover-popover>.markdown-embed { - height: var(--popover-height); - max-height: var(--popover-max-height); +.popover.hover-popover>.markdown-embed, .popover.hover-popover>.canvas-embed { + min-height: 150px; + height: 100%; + max-height: min(var(--popover-height), var(--popover-max-height)); border: 0; padding: 0; margin: 0; + overflow: auto; +} + +.popover.hover-popover>.canvas-embed { + min-height: 350px; } .popover.hover-popover>.markdown-embed>.markdown-embed-content { diff --git a/components/CanvasEdge.vue b/components/CanvasEdge.client.vue similarity index 100% rename from components/CanvasEdge.vue rename to components/CanvasEdge.client.vue diff --git a/components/CanvasNode.vue b/components/CanvasNode.client.vue similarity index 76% rename from components/CanvasNode.vue rename to components/CanvasNode.client.vue index e77b24a..0271cf6 100644 --- a/components/CanvasNode.vue +++ b/components/CanvasNode.client.vue @@ -6,9 +6,21 @@ interface Props { zoom: number; } +function getColor(color: string): string +{ + if(props.node?.color?.startsWith('#')) + return hexToRgb(color); + else + return getComputedStyle(document.body, null).getPropertyValue('--canvas-color-' + props.node.color); +} function hexToRgb(hex: string): string { - return `${parseInt(hex.substring(1, 3), 16)}, ${parseInt(hex.substring(3, 5), 16)}, ${parseInt(hex.substring(5, 7), 16)}`; + return `${parseInt(hex.substring(1, 3), 16)},${parseInt(hex.substring(3, 5), 16)},${parseInt(hex.substring(5, 7), 16)}`; +} +function darken(rgb: string): boolean +{ + const [r, g, b] = rgb.split(','); + return (299 * parseInt(r) + 587 * parseInt(g) + 114 * parseInt(b)) / 1e3 >= 150; } const props = defineProps(); @@ -25,7 +37,7 @@ if(props.node.color !== undefined)