hierarchy-graph/styles.css at master · ISO53/hierarchy-graph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* Hierarchy Graph View Styles */

/* Main container fills the entire view */
.hierarchy-graph-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background-color: var(--background-primary);
}

/* Graph wrapper for the canvas */
.hierarchy-graph-wrapper {
	width: 100%;
	height: 100%;
	min-height: 400px;
	position: absolute;
	top: 0;
	left: 0;
}

/* Force-graph canvas styling */
.hierarchy-graph-wrapper canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/*
 * Graph color definitions using Obsidian CSS variables
 * These are read by the JavaScript and applied to the canvas
 */
.hierarchy-graph-container {
	--hierarchy-node-file: var(--graph-node, var(--text-accent, #7f6df2));
	--hierarchy-node-folder: var(--graph-node, var(--text-accent, #7f6df2));
	--hierarchy-line: var(--graph-line, var(--text-muted, #888888));
	--hierarchy-text: var(--graph-text, var(--text-normal, #dcddde));
	--hierarchy-node-focused: var(--graph-node-focused, var(--interactive-accent, #7f6df2));
}

/* Theme-specific overrides for better visibility */
.theme-light .hierarchy-graph-container {
	--hierarchy-node-file: var(--graph-node, var(--text-accent, #705dcf));
	--hierarchy-node-folder: var(--graph-node, var(--text-accent, #705dcf));
	--hierarchy-line: var(--graph-line, var(--text-muted, #666666));
	--hierarchy-text: var(--graph-text, var(--text-normal, #2e3338));
}

/* Hover state cursor handled by JS, but ensure proper cursor inheritance */
.hierarchy-graph-wrapper {
	cursor: default;
}

/* Loading state (optional - can be used when building large graphs) */
.hierarchy-graph-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

/* Tooltip styling if we add custom tooltips later */
.hierarchy-graph-tooltip {
	position: absolute;
	padding: 4px 8px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	color: var(--text-normal);
	font-size: var(--font-ui-small);
	pointer-events: none;
	z-index: 100;
	box-shadow: var(--shadow-s);
}