diff options
Diffstat (limited to 'packages/memory-graph/src/components/node-detail-panel.css.ts')
| -rw-r--r-- | packages/memory-graph/src/components/node-detail-panel.css.ts | 49 |
1 files changed, 25 insertions, 24 deletions
diff --git a/packages/memory-graph/src/components/node-detail-panel.css.ts b/packages/memory-graph/src/components/node-detail-panel.css.ts index a3c30e06..5429e2bd 100644 --- a/packages/memory-graph/src/components/node-detail-panel.css.ts +++ b/packages/memory-graph/src/components/node-detail-panel.css.ts @@ -1,5 +1,5 @@ -import { style } from "@vanilla-extract/css"; -import { themeContract } from "../styles/theme.css"; +import { style } from "@vanilla-extract/css" +import { themeContract } from "../styles/theme.css" /** * Main container (positioned absolutely) @@ -16,8 +16,9 @@ export const container = style({ right: themeContract.space[4], // Add shadow for depth - boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3)", -}); + boxShadow: + "0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3)", +}) /** * Content wrapper with scrolling @@ -28,7 +29,7 @@ export const content = style({ padding: themeContract.space[4], overflowY: "auto", maxHeight: "80vh", -}); +}) /** * Header section @@ -38,25 +39,25 @@ export const header = style({ alignItems: "center", justifyContent: "space-between", marginBottom: themeContract.space[3], -}); +}) export const headerLeft = style({ display: "flex", alignItems: "center", gap: themeContract.space[2], -}); +}) export const headerIcon = style({ width: "1.25rem", height: "1.25rem", color: themeContract.colors.text.secondary, -}); +}) export const headerIconMemory = style({ width: "1.25rem", height: "1.25rem", color: "rgb(96, 165, 250)", // blue-400 -}); +}) export const closeButton = style({ height: "32px", @@ -69,12 +70,12 @@ export const closeButton = style({ color: themeContract.colors.text.primary, }, }, -}); +}) export const closeIcon = style({ width: "1rem", height: "1rem", -}); +}) /** * Content sections @@ -83,22 +84,22 @@ export const sections = style({ display: "flex", flexDirection: "column", gap: themeContract.space[3], -}); +}) -export const section = style({}); +export const section = style({}) export const sectionLabel = style({ fontSize: themeContract.typography.fontSize.xs, color: themeContract.colors.text.muted, textTransform: "uppercase", letterSpacing: "0.05em", -}); +}) export const sectionValue = style({ fontSize: themeContract.typography.fontSize.sm, color: themeContract.colors.text.secondary, marginTop: themeContract.space[1], -}); +}) export const sectionValueTruncated = style({ fontSize: themeContract.typography.fontSize.sm, @@ -108,7 +109,7 @@ export const sectionValueTruncated = style({ display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", -}); +}) export const link = style({ fontSize: themeContract.typography.fontSize.sm, @@ -125,22 +126,22 @@ export const link = style({ color: "rgb(165, 180, 252)", // indigo-300 }, }, -}); +}) export const linkIcon = style({ width: "0.75rem", height: "0.75rem", -}); +}) export const badge = style({ marginTop: themeContract.space[2], -}); +}) export const expiryText = style({ fontSize: themeContract.typography.fontSize.xs, color: themeContract.colors.text.muted, marginTop: themeContract.space[1], -}); +}) /** * Footer section (metadata) @@ -148,7 +149,7 @@ export const expiryText = style({ export const footer = style({ paddingTop: themeContract.space[2], borderTop: "1px solid rgba(71, 85, 105, 0.5)", // slate-700/50 -}); +}) export const metadata = style({ display: "flex", @@ -156,15 +157,15 @@ export const metadata = style({ gap: themeContract.space[4], fontSize: themeContract.typography.fontSize.xs, color: themeContract.colors.text.muted, -}); +}) export const metadataItem = style({ display: "flex", alignItems: "center", gap: themeContract.space[1], -}); +}) export const metadataIcon = style({ width: "0.75rem", height: "0.75rem", -}); +}) |