dsh-mnemon-source-memory-spaces 0.5.9 → 0.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/client.js +84 -52
- package/lib/contracts.d.ts +3 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +52 -114
- package/lib/types/client/pages.d.ts +1 -0
- package/lib/types/client/provider-presentation.d.ts +0 -1
- package/lib/types/contracts.d.ts +3 -1
- package/locale/en.json +6 -0
- package/locale/zh.json +6 -0
- package/package.json +24 -17
- package/presentation/locales.json +8 -6
- package/presentation/page.module.css +264 -246
- package/presentation/sidebar.module.css +60 -123
|
@@ -1,74 +1,81 @@
|
|
|
1
1
|
.entityHeading > span,
|
|
2
2
|
.inspectorHeading > span {
|
|
3
|
-
color: var(--mn-faint); font:
|
|
3
|
+
color: var(--mn-faint); font-size: 12px; font-weight: 500; line-height: 18px;
|
|
4
4
|
}
|
|
5
|
-
.memoryHeaderActions { display: flex; align-items: center; gap:
|
|
5
|
+
.memoryHeaderActions { display: flex; align-items: center; gap: 8px; }
|
|
6
6
|
.memoryHeaderActions > button { white-space: nowrap; }
|
|
7
7
|
.asyncRegion { position: relative; min-width: 0; }
|
|
8
8
|
.asyncResults { position: relative; min-width: 0; min-height: 120px; }
|
|
9
|
-
.asyncPlaceholder { position: relative; display: grid; min-height: 220px; place-items: center; border:
|
|
10
|
-
.muted { padding: 16px 0; color: var(--mn-faint); font-size:
|
|
9
|
+
.asyncPlaceholder { position: relative; display: grid; min-height: 220px; place-items: center; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); color: var(--mn-faint); }
|
|
10
|
+
.muted { padding: 16px 0; color: var(--mn-faint); font-size: 13px; }
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
.readSources
|
|
12
|
+
/* Read sources: one compact row per active space, as DSH settings cards. */
|
|
13
|
+
.readSources { display: grid; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
14
|
+
.readSources > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
14
15
|
.readSources > header > div { display: grid; gap: 2px; }
|
|
15
|
-
.readSources > header strong { font-size:
|
|
16
|
-
.readSources > header p { max-width: 92ch; margin: 0; color: var(--mn-
|
|
17
|
-
.readSources > header > button { min-height:
|
|
18
|
-
.readSources > header > button
|
|
19
|
-
.readSources >
|
|
16
|
+
.readSources > header strong { font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
17
|
+
.readSources > header p { max-width: 92ch; margin: 0; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
18
|
+
.readSources > header > button { min-height: 28px; flex: 0 0 auto; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-sm); padding: 0 10px; color: var(--mn-text); background: transparent; font-size: 12px; line-height: 18px; cursor: pointer; }
|
|
19
|
+
.readSources > header > button:hover { background: var(--mn-hover); }
|
|
20
|
+
.readSources > header > button[data-selected] { border-color: transparent; background: var(--mn-fill); }
|
|
21
|
+
.readSources > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px; }
|
|
20
22
|
.readSourceCard,
|
|
21
23
|
.bodyCard,
|
|
22
|
-
.metadataList > label { border:
|
|
23
|
-
.readSourceCard { display: grid; min-width: 0; min-height:
|
|
24
|
+
.metadataList > label { border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-md); color: var(--mn-text); background: transparent; }
|
|
25
|
+
.readSourceCard { display: grid; min-width: 0; min-height: 56px; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; text-align: left; }
|
|
24
26
|
button.readSourceCard { cursor: pointer; }
|
|
25
|
-
button.readSourceCard:hover {
|
|
26
|
-
.readSourceCard[data-selected] { border-color:
|
|
27
|
-
|
|
27
|
+
button.readSourceCard:hover { background: var(--mn-hover); }
|
|
28
|
+
.readSourceCard[data-selected] { border-color: var(--mn-field-line); background: var(--mn-fill); }
|
|
29
|
+
/* StateDot: success, idle, warning or error; no halo. */
|
|
30
|
+
.readSourceSignal { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-success); }
|
|
28
31
|
.readSourceCard[data-mode="projection"] .readSourceSignal,
|
|
29
|
-
.readSourceCard[data-mode="enumerable"] .readSourceSignal { background:
|
|
30
|
-
.readSourceCard[data-mode="query-only"] .readSourceSignal { background:
|
|
31
|
-
.readSourceCard[data-status="unavailable"] .readSourceSignal
|
|
32
|
-
.readSourceCard[data-status="unsupported"] .readSourceSignal
|
|
33
|
-
.readSourceCard[data-status="empty"] .readSourceSignal { background: var(--mn-
|
|
32
|
+
.readSourceCard[data-mode="enumerable"] .readSourceSignal { background: var(--mn-success); }
|
|
33
|
+
.readSourceCard[data-mode="query-only"] .readSourceSignal { background: var(--mn-warn); }
|
|
34
|
+
.readSourceCard[data-status="unavailable"] .readSourceSignal { background: var(--mn-danger); }
|
|
35
|
+
.readSourceCard[data-status="unsupported"] .readSourceSignal,
|
|
36
|
+
.readSourceCard[data-status="empty"] .readSourceSignal { background: var(--mn-idle); }
|
|
37
|
+
.readSourceCard[data-status="unsupported"] { color: var(--mn-faint); }
|
|
34
38
|
.readSourceIdentity,
|
|
35
|
-
.readSourceState { display: grid; min-width: 0; gap:
|
|
36
|
-
.readSourceIdentity strong { overflow: hidden; font-size:
|
|
37
|
-
.readSourceMeta { display: flex; min-width: 0; align-items: center; gap:
|
|
38
|
-
.readSourceMeta > small { overflow: hidden; color: var(--mn-faint); font-size:
|
|
39
|
+
.readSourceState { display: grid; min-width: 0; gap: 2px; }
|
|
40
|
+
.readSourceIdentity strong { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
|
|
41
|
+
.readSourceMeta { display: flex; min-width: 0; align-items: center; gap: 6px; }
|
|
42
|
+
.readSourceMeta > small { overflow: hidden; color: var(--mn-faint); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
|
|
39
43
|
.readSourceState { justify-items: end; text-align: right; }
|
|
40
|
-
.readSourceState em { width: fit-content; padding:
|
|
41
|
-
.readSourceState
|
|
44
|
+
.readSourceState em { width: fit-content; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-style: normal; font-weight: 500; line-height: 17px; white-space: nowrap; }
|
|
45
|
+
.readSourceCard[data-status="unsupported"] .readSourceState em { border: .5px solid var(--mn-field-line); color: var(--mn-faint); background: transparent; }
|
|
46
|
+
.readSourceState small { color: var(--mn-faint); font-size: 11px; line-height: 14px; white-space: nowrap; }
|
|
42
47
|
|
|
43
|
-
.bodyDirectory { position: relative; margin-bottom: 12px; padding:
|
|
44
|
-
.bodyDirectoryHeader { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap:
|
|
48
|
+
.bodyDirectory { position: relative; margin-bottom: 12px; padding: 16px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
49
|
+
.bodyDirectoryHeader { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
|
45
50
|
.bodyDirectoryHeader > div:first-child { min-width: 0; flex: 1 1 260px; }
|
|
46
|
-
.bodyDirectoryHeader h3 { margin:
|
|
47
|
-
.bodyDirectoryHeader p { margin: 0; color: var(--mn-
|
|
48
|
-
.bodyDirectoryPath { display: block; max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--mn-faint); font-size:
|
|
49
|
-
.bodyDirectoryControls { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap:
|
|
50
|
-
.bodyDirectoryControls > strong { flex: 0 0 auto; padding:
|
|
51
|
-
.bodyGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap:
|
|
52
|
-
.bodyDirectoryEmpty { grid-column: 1 / -1; min-height:
|
|
53
|
-
.bodyDirectoryEmpty > span {
|
|
54
|
-
.bodyDirectoryEmpty strong { display: block; color: var(--mn-text); }
|
|
55
|
-
.bodyDirectoryEmpty p { margin:
|
|
56
|
-
.bodyCard { --mn-body-accent: var(--mn-success); min-width: 0; padding:
|
|
57
|
-
.bodyCard[data-active] {
|
|
51
|
+
.bodyDirectoryHeader h3 { margin: 0; font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
52
|
+
.bodyDirectoryHeader p { margin: 2px 0 0; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
53
|
+
.bodyDirectoryPath { display: block; max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--mn-faint); font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
|
|
54
|
+
.bodyDirectoryControls { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 28px; }
|
|
55
|
+
.bodyDirectoryControls > strong { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; font-variant-numeric: tabular-nums; }
|
|
56
|
+
.bodyGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 8px; }
|
|
57
|
+
.bodyDirectoryEmpty { grid-column: 1 / -1; min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: var(--dsw-radius-md); color: var(--mn-muted); background: var(--mn-fill); }
|
|
58
|
+
.bodyDirectoryEmpty > span { color: var(--mn-faint); font-size: 24px; }
|
|
59
|
+
.bodyDirectoryEmpty strong { display: block; color: var(--mn-text); font-weight: 500; }
|
|
60
|
+
.bodyDirectoryEmpty p { margin: 2px 0 0; color: var(--mn-faint); font-size: 12px; }
|
|
61
|
+
.bodyCard { --mn-body-accent: var(--mn-success); min-width: 0; padding: 12px 14px; transition: border-color .16s, background-color .16s; }
|
|
62
|
+
.bodyCard:not([data-active]) { background: var(--mn-fill); border-color: transparent; }
|
|
58
63
|
.bodyCard[data-reconnectable] { cursor: pointer; }
|
|
59
|
-
.bodyCard[data-reconnectable]:hover { border-color:
|
|
60
|
-
.bodyCard[data-reconnectable]:focus-visible { outline: 2px solid
|
|
61
|
-
.bodySignal { width:
|
|
62
|
-
.bodyCard[data-active] .bodySignal { background: var(--mn-body-accent);
|
|
63
|
-
.bodyCard:not([data-healthy]) .bodySignal { background: var(--mn-danger);
|
|
64
|
-
.bodyCard[data-status-loading] .bodySignal { background: var(--mn-
|
|
65
|
-
.bodyCard[data-reconnecting] .bodySignal { box-sizing: border-box; width:
|
|
66
|
-
.bodyHealth { color: var(--mn-success); font
|
|
64
|
+
.bodyCard[data-reconnectable]:hover { border-color: var(--mn-field-line); }
|
|
65
|
+
.bodyCard[data-reconnectable]:focus-visible { outline: var(--dsw-focus-ring-width, 2px) solid var(--mn-focus); outline-offset: 2px; }
|
|
66
|
+
.bodySignal { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-idle); }
|
|
67
|
+
.bodyCard[data-active] .bodySignal { background: var(--mn-body-accent); }
|
|
68
|
+
.bodyCard:not([data-healthy]) .bodySignal { background: var(--mn-danger); }
|
|
69
|
+
.bodyCard[data-status-loading] .bodySignal { background: var(--mn-idle); }
|
|
70
|
+
.bodyCard[data-reconnecting] .bodySignal { box-sizing: border-box; width: 8px; height: 8px; border: 1.5px solid color-mix(in srgb, var(--mn-faint) 25%, transparent); border-top-color: var(--mn-faint); background: transparent; animation: mnemon-spin .9s linear infinite; }
|
|
71
|
+
.bodyHealth { color: var(--mn-success); font-size: 12px; line-height: 18px; }
|
|
67
72
|
.bodyCard:not([data-healthy]) .bodyHealth { color: var(--mn-danger); }
|
|
68
73
|
.bodyCard[data-status-loading] .bodyHealth { color: var(--mn-faint); }
|
|
69
|
-
.mnemonDefaultBadge { width: fit-content; padding:
|
|
70
|
-
|
|
74
|
+
.mnemonDefaultBadge { width: fit-content; padding: 1px 8px; border-radius: 999px; color: var(--mn-accent); background: color-mix(in srgb, var(--mn-accent) 10%, transparent); font-size: 11px; font-weight: 500; line-height: 17px; white-space: nowrap; }
|
|
75
|
+
/* DSH Tag, neutral tone: the Provider is a fact, not a status. */
|
|
76
|
+
.providerBadge { display: inline-flex; width: fit-content; max-width: 100%; flex: 0 0 auto; align-items: center; justify-content: center; padding: 1px 8px; overflow: hidden; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; text-align: center; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
|
|
71
77
|
|
|
78
|
+
/* Provider hues identify spaces in the graph only. */
|
|
72
79
|
.providerBadge,
|
|
73
80
|
.readSourceCard,
|
|
74
81
|
.bodyCard,
|
|
@@ -119,145 +126,154 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
119
126
|
.bodyCard[data-provider="supermemory"],
|
|
120
127
|
.metadataList > label[data-provider="supermemory"],
|
|
121
128
|
.graphNode[data-provider="supermemory"] { --mn-provider-color: #df4d72; }
|
|
122
|
-
|
|
123
|
-
.
|
|
124
|
-
.bodySwitchTrack
|
|
125
|
-
.
|
|
126
|
-
.bodySwitch:hover
|
|
127
|
-
.bodySwitch[aria-checked="true"] { color: var(--mn-
|
|
128
|
-
.bodySwitch[aria-checked="true"] .bodySwitchTrack {
|
|
129
|
-
.bodySwitch[aria-checked="true"] .bodySwitchTrack i {
|
|
130
|
-
.bodyCardActions { display: flex; align-items: center; gap:
|
|
131
|
-
.bodyCreateForm { gap:
|
|
132
|
-
.createSection { display: grid; gap:
|
|
133
|
-
.createSectionHeading { display: flex; align-items: flex-start; gap:
|
|
134
|
-
.createSectionHeading > span { display: grid; width:
|
|
129
|
+
/* DSH Switch: 36 by 20 track, brand fill when on. */
|
|
130
|
+
.bodySwitch { display: flex; min-height: 28px; align-items: center; gap: 8px; border: 0; padding: 0; color: var(--mn-faint); background: transparent; font-size: 12px; line-height: 18px; cursor: pointer; }
|
|
131
|
+
.bodySwitchTrack { position: relative; width: 36px; height: 20px; flex: 0 0 auto; box-sizing: border-box; padding: 2px; border-radius: 999px; background: var(--mn-line-strong); transition: background-color 120ms ease; }
|
|
132
|
+
.bodySwitchTrack i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--dsw-alias-label-primary-foreground); transition: transform 120ms ease; }
|
|
133
|
+
.bodySwitch:hover { color: var(--mn-muted); }
|
|
134
|
+
.bodySwitch[aria-checked="true"] { color: var(--mn-muted); }
|
|
135
|
+
.bodySwitch[aria-checked="true"] .bodySwitchTrack { background: var(--dsw-alias-brand-primary); }
|
|
136
|
+
.bodySwitch[aria-checked="true"] .bodySwitchTrack i { transform: translateX(16px); }
|
|
137
|
+
.bodyCardActions { display: flex; align-items: center; gap: 8px; }
|
|
138
|
+
.bodyCreateForm { gap: 16px; padding-top: 0; }
|
|
139
|
+
.createSection { display: grid; gap: 12px; padding: 14px 16px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
140
|
+
.createSectionHeading { display: flex; align-items: flex-start; gap: 10px; }
|
|
141
|
+
.createSectionHeading > span { display: grid; min-width: 22px; height: 22px; flex: 0 0 auto; place-items: center; padding: 0 6px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 1; }
|
|
135
142
|
.createSectionHeading > div { display: grid; min-width: 0; gap: 2px; }
|
|
136
|
-
.createSectionHeading strong { color: var(--mn-text); font-size:
|
|
137
|
-
.createSectionHeading small { color: var(--mn-
|
|
138
|
-
.createIdentityGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap:
|
|
143
|
+
.createSectionHeading strong { color: var(--mn-text); font-size: 14px; font-weight: 500; line-height: 22px; }
|
|
144
|
+
.createSectionHeading small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
145
|
+
.createIdentityGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
|
|
139
146
|
.createIdentityGrid > label { align-content: start; }
|
|
140
|
-
.createIdentityGrid textarea { min-height:
|
|
141
|
-
.strategyForm { gap:
|
|
142
|
-
.strategyLoading { position: relative; display: flex; min-height: 88px; align-items: center; justify-content: center; border:
|
|
143
|
-
.strategyLoading .sectionSpinner { top:
|
|
144
|
-
|
|
145
|
-
.placementMode
|
|
146
|
-
.placementMode
|
|
147
|
-
.placementMode label
|
|
148
|
-
.placementMode label
|
|
147
|
+
.createIdentityGrid textarea { min-height: 72px; }
|
|
148
|
+
.strategyForm { gap: 16px; padding-top: 0; }
|
|
149
|
+
.strategyLoading { position: relative; display: flex; min-height: 88px; align-items: center; justify-content: center; border-radius: var(--dsw-radius-md); color: var(--mn-faint); background: var(--mn-fill); font-size: 12px; }
|
|
150
|
+
.strategyLoading .sectionSpinner { top: 10px; right: 10px; }
|
|
151
|
+
/* Choice tiles, as the DSH appearance choice: hairline, filled when selected. */
|
|
152
|
+
.placementMode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
|
|
153
|
+
.placementMode legend { margin-bottom: 6px; color: var(--mn-muted); font-size: 12px; font-weight: 500; line-height: 18px; }
|
|
154
|
+
.placementMode label { position: relative; display: grid; min-width: 0; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-md); cursor: pointer; }
|
|
155
|
+
.placementMode label:hover { background: var(--mn-hover); }
|
|
156
|
+
.placementMode label[data-selected] { border-color: var(--mn-field-line); background: var(--mn-fill); }
|
|
157
|
+
.placementMode label[data-disabled] { cursor: not-allowed; opacity: .5; }
|
|
149
158
|
.placementMode input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
150
|
-
.placementMode span { display: grid; gap:
|
|
151
|
-
.placementMode strong { color: var(--mn-text); font-size:
|
|
152
|
-
.placementMode strong em { margin-left:
|
|
153
|
-
.placementMode small { color: var(--mn-
|
|
154
|
-
.placementPolicy { display: grid; gap:
|
|
159
|
+
.placementMode span { display: grid; gap: 2px; }
|
|
160
|
+
.placementMode strong { color: var(--mn-text); font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
161
|
+
.placementMode strong em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-style: normal; font-weight: 500; line-height: 17px; }
|
|
162
|
+
.placementMode small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
163
|
+
.placementPolicy { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-md); }
|
|
155
164
|
.placementPolicyHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
156
165
|
.placementPolicyHeading > div { display: grid; gap: 2px; }
|
|
157
|
-
.placementPolicyHeading strong { font-size:
|
|
158
|
-
.placementPolicyHeading small { color: var(--mn-
|
|
159
|
-
.placementPolicyHeading > span { flex: 0 0 auto; padding:
|
|
166
|
+
.placementPolicyHeading strong { font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
167
|
+
.placementPolicyHeading small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
168
|
+
.placementPolicyHeading > span { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
160
169
|
.placementRuleGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
161
170
|
.capabilityRules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
|
|
162
|
-
.capabilityRules legend { width: 100%; margin-bottom:
|
|
163
|
-
.capabilityRules label { position: relative; display: flex; width: fit-content; align-items: center; gap: 6px; padding:
|
|
164
|
-
.capabilityRules label
|
|
171
|
+
.capabilityRules legend { width: 100%; margin-bottom: 4px; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
172
|
+
.capabilityRules label { position: relative; display: flex; width: fit-content; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-sm); color: var(--mn-muted); font-size: 12px; cursor: pointer; }
|
|
173
|
+
.capabilityRules label:hover { background: var(--mn-hover); }
|
|
174
|
+
.capabilityRules label[data-selected] { border-color: var(--mn-field-line); color: var(--mn-text); background: var(--mn-fill); }
|
|
165
175
|
.capabilityRules input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
166
|
-
.placementCandidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:
|
|
176
|
+
.placementCandidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
167
177
|
.placementCandidates > span,
|
|
168
|
-
.placementCandidates > label { position: relative; display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap:
|
|
178
|
+
.placementCandidates > label { position: relative; display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 8px 10px; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-md); }
|
|
169
179
|
.placementCandidates > label { cursor: pointer; }
|
|
170
|
-
.placementCandidates >
|
|
171
|
-
.placementCandidates >
|
|
180
|
+
.placementCandidates > label:hover { background: var(--mn-hover); }
|
|
181
|
+
.placementCandidates > [data-selected] { border-color: var(--mn-field-line); background: var(--mn-fill); }
|
|
182
|
+
.placementCandidates > label[data-disabled] { cursor: not-allowed; opacity: .5; }
|
|
172
183
|
.placementCandidates input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
173
184
|
.placementCandidates > span > span:not(.candidateIcon),
|
|
174
185
|
.placementCandidates > label > span:not(.candidateIcon) { display: grid; min-width: 0; gap: 2px; }
|
|
175
|
-
.placementCandidates strong { color: var(--mn-text); font-size:
|
|
176
|
-
.placementCandidates small { color: var(--mn-
|
|
186
|
+
.placementCandidates strong { color: var(--mn-text); font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
187
|
+
.placementCandidates small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
177
188
|
.providerChoice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
|
|
178
|
-
.providerChoice legend { margin-bottom:
|
|
179
|
-
.providerChoice label { position: relative; display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap:
|
|
180
|
-
.providerChoice label
|
|
181
|
-
.providerChoice label[data-
|
|
189
|
+
.providerChoice legend { margin-bottom: 6px; color: var(--mn-muted); font-size: 12px; font-weight: 500; line-height: 18px; }
|
|
190
|
+
.providerChoice label { position: relative; display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px 12px; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-md); cursor: pointer; }
|
|
191
|
+
.providerChoice label:hover { background: var(--mn-hover); }
|
|
192
|
+
.providerChoice label[data-native] { grid-column: 1 / -1; }
|
|
193
|
+
.providerChoice label[data-selected] { border-color: var(--mn-field-line); background: var(--mn-fill); }
|
|
182
194
|
.providerChoice label[data-disabled] { cursor: not-allowed; opacity: .5; }
|
|
183
195
|
.providerChoice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
184
|
-
.providerChoice span { display: grid; gap:
|
|
185
|
-
.providerChoice strong { color: var(--mn-text); font-size:
|
|
186
|
-
.providerChoice strong em { margin-left:
|
|
187
|
-
.providerChoice
|
|
196
|
+
.providerChoice span { display: grid; gap: 2px; }
|
|
197
|
+
.providerChoice strong { color: var(--mn-text); font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
198
|
+
.providerChoice strong em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-style: normal; font-weight: 500; line-height: 17px; }
|
|
199
|
+
.providerChoice label[data-selected] strong em { background: var(--mn-layer-1); }
|
|
200
|
+
.providerChoice small { display: -webkit-box; overflow: hidden; color: var(--mn-faint); font-size: 12px; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
201
|
+
/* Provider marks, as the DSH plugin icon tile. */
|
|
188
202
|
.providerChoiceIcon,
|
|
189
203
|
.candidateIcon,
|
|
190
|
-
.providerFieldIcon { display: grid; box-sizing: border-box; place-items: center; overflow: hidden; border:
|
|
191
|
-
.providerChoiceIcon { width: 32px; height: 32px; border-radius:
|
|
192
|
-
.candidateIcon { width: 28px; height: 28px; border-radius:
|
|
193
|
-
.providerFieldIcon { width:
|
|
204
|
+
.providerFieldIcon { display: grid; box-sizing: border-box; place-items: center; overflow: hidden; border: .5px solid var(--mn-line-strong); background: var(--mn-layer-1); }
|
|
205
|
+
.providerChoiceIcon { width: 32px; height: 32px; border-radius: var(--dsw-radius-sm); padding: 4px; }
|
|
206
|
+
.candidateIcon { width: 28px; height: 28px; border-radius: var(--dsw-radius-sm); padding: 4px; }
|
|
207
|
+
.providerFieldIcon { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--dsw-radius-sm); padding: 4px; }
|
|
194
208
|
.providerChoiceIcon > img,
|
|
195
209
|
.providerChoiceIcon > svg,
|
|
196
210
|
.candidateIcon > img,
|
|
197
211
|
.candidateIcon > svg,
|
|
198
212
|
.providerFieldIcon > img,
|
|
199
|
-
.providerFieldIcon > svg { display: block; width: 100%; height: 100%; border-radius:
|
|
200
|
-
|
|
213
|
+
.providerFieldIcon > svg { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: contain; }
|
|
214
|
+
/* Radio and check marks, as the DSH Checkbox: brand fill when selected. */
|
|
215
|
+
.choiceControl { position: relative; display: grid; width: 16px; height: 16px; box-sizing: border-box; flex: 0 0 auto; place-items: center; border: 1px solid var(--mn-field-line); border-radius: 4px; background: var(--mn-layer-1); }
|
|
201
216
|
.choiceControl[data-kind='radio'] { border-radius: 50%; }
|
|
202
|
-
[data-selected] > .choiceControl { border-color: var(--
|
|
203
|
-
[data-selected] > .choiceControl[data-kind='check']::after { width: 7px; height: 4px; border-bottom: 1.5px solid
|
|
204
|
-
[data-selected] > .choiceControl[data-kind='radio']::after { width: 6px; height: 6px; border-radius: 50%; content: ''; background:
|
|
205
|
-
.
|
|
206
|
-
.
|
|
207
|
-
.
|
|
208
|
-
.
|
|
209
|
-
.
|
|
217
|
+
[data-selected] > .choiceControl { border-color: var(--dsw-alias-brand-primary); background: var(--dsw-alias-brand-primary); }
|
|
218
|
+
[data-selected] > .choiceControl[data-kind='check']::after { width: 7px; height: 4px; border-bottom: 1.5px solid var(--dsw-alias-label-primary-foreground); border-left: 1.5px solid var(--dsw-alias-label-primary-foreground); content: ''; transform: translateY(-1px) rotate(-45deg); }
|
|
219
|
+
[data-selected] > .choiceControl[data-kind='radio']::after { width: 6px; height: 6px; border-radius: 50%; content: ''; background: var(--dsw-alias-label-primary-foreground); }
|
|
220
|
+
/* Keyboard focus only: a dialog that focuses its first choice on open shows no ring. */
|
|
221
|
+
.placementMode label:has(input:focus-visible),
|
|
222
|
+
.providerChoice label:has(input:focus-visible),
|
|
223
|
+
.capabilityRules label:has(input:focus-visible),
|
|
224
|
+
.placementCandidates label:has(input:focus-visible) { outline: var(--dsw-focus-ring-width, 2px) solid var(--mn-focus); outline-offset: 1px; }
|
|
225
|
+
.providerFields { display: grid; gap: 10px; padding: 12px 14px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-md); }
|
|
210
226
|
.providerFieldHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
211
|
-
.providerFieldIdentity { display: flex; min-width: 0; align-items: center; gap:
|
|
227
|
+
.providerFieldIdentity { display: flex; min-width: 0; align-items: center; gap: 10px; }
|
|
212
228
|
.providerFieldIdentity > div { display: grid; min-width: 0; gap: 2px; }
|
|
213
|
-
.providerFieldHeading strong { color: var(--mn-text); font-size:
|
|
214
|
-
.providerFieldHeading small { color: var(--mn-
|
|
215
|
-
.providerFieldHeading > span { flex: 0 0 auto; padding:
|
|
229
|
+
.providerFieldHeading strong { color: var(--mn-text); font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
230
|
+
.providerFieldHeading small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
231
|
+
.providerFieldHeading > span { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
216
232
|
.providerFields details { min-width: 0; }
|
|
217
|
-
.providerFields summary { width: fit-content; color: var(--mn-
|
|
218
|
-
.
|
|
219
|
-
.
|
|
220
|
-
.
|
|
221
|
-
.
|
|
222
|
-
.placementReceipt
|
|
233
|
+
.providerFields summary { width: fit-content; color: var(--mn-muted); cursor: pointer; font-size: 12px; line-height: 18px; }
|
|
234
|
+
.providerFields summary:hover { color: var(--mn-text); }
|
|
235
|
+
.providerAdvancedGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
|
|
236
|
+
.providerFieldControl .providerSecretClear { display: flex; align-items: center; gap: 6px; color: var(--mn-muted); cursor: pointer; font-size: 12px; font-weight: 400; }
|
|
237
|
+
.providerWriteHint { display: block; margin-top: 4px; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
238
|
+
.placementReceipt { display: flex; min-width: 0; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: var(--dsw-radius-sm); color: var(--mn-muted); background: var(--mn-fill); }
|
|
239
|
+
.placementReceipt > span { flex: 0 0 auto; font-size: 12px; }
|
|
223
240
|
.placementReceipt > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
|
|
224
241
|
.placementReceipt strong,
|
|
225
242
|
.placementReceipt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
226
|
-
.placementReceipt strong { font-size:
|
|
227
|
-
.placementReceipt small { color: var(--mn-
|
|
228
|
-
.placementReceipt p { grid-column: 1 / -1; margin: 0; overflow: hidden; color: var(--mn-
|
|
229
|
-
.bodyCard > p { min-height:
|
|
230
|
-
.bodyCard footer { display: flex; min-width: 0; flex-wrap: nowrap; gap:
|
|
243
|
+
.placementReceipt strong { color: var(--mn-text); font-size: 12px; font-weight: 500; line-height: 18px; }
|
|
244
|
+
.placementReceipt small { color: var(--mn-faint); font-size: 11px; line-height: 18px; }
|
|
245
|
+
.placementReceipt p { grid-column: 1 / -1; margin: 0; overflow: hidden; color: var(--mn-faint); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
|
|
246
|
+
.bodyCard > p { min-height: 18px; margin: 8px 0; color: var(--mn-muted); font-size: 13px; line-height: 20px; }
|
|
247
|
+
.bodyCard footer { display: flex; min-width: 0; flex-wrap: nowrap; gap: 4px 12px; padding-top: 8px; overflow: hidden; border-top: .5px solid var(--mn-line); color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
231
248
|
.bodyFooterBlock { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
232
249
|
.bodyFooterGrow { flex: 1 1 auto; }
|
|
233
250
|
|
|
234
|
-
.graphLayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px,
|
|
251
|
+
.graphLayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); gap: 12px; }
|
|
235
252
|
.graphPanel,
|
|
236
|
-
.graphInspector { border:
|
|
253
|
+
.graphInspector { border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
237
254
|
.graphPanel { position: relative; min-width: 0; overflow: hidden; }
|
|
238
255
|
.graphToolbar,
|
|
239
|
-
.graphFooter { display: flex; min-height:
|
|
240
|
-
.graphToolbar { border-bottom:
|
|
241
|
-
.graphToolbar > div:first-child { display: flex; align-items: center; gap:
|
|
256
|
+
.graphFooter { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
257
|
+
.graphToolbar { border-bottom: .5px solid var(--mn-line); }
|
|
258
|
+
.graphToolbar > div:first-child { display: flex; align-items: center; gap: 8px; }
|
|
242
259
|
.graphToolbar small { color: var(--mn-faint); }
|
|
243
|
-
.liveDot { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-success);
|
|
244
|
-
.graphLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap:
|
|
245
|
-
.graphLegend span { display: flex; align-items: center; gap:
|
|
246
|
-
.graphLegend span::before { width:
|
|
260
|
+
.liveDot { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-success); }
|
|
261
|
+
.graphLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
|
|
262
|
+
.graphLegend span { display: flex; align-items: center; gap: 6px; }
|
|
263
|
+
.graphLegend span::before { width: 14px; height: 2px; border-radius: 2px; content: ""; background: var(--edge-color); }
|
|
247
264
|
.graphLegend [data-edge="temporal"] { --edge-color: #87909f; }
|
|
248
265
|
.graphLegend [data-edge="scope"] { --edge-color: #708199; }
|
|
249
266
|
.graphLegend [data-edge="scope"]::before { background: repeating-linear-gradient(90deg, var(--edge-color) 0 4px, transparent 4px 7px); }
|
|
250
267
|
.graphLegend [data-edge="semantic"] { --edge-color: #4d7cfe; }
|
|
251
268
|
.graphLegend [data-edge="causal"] { --edge-color: #ef6b5b; }
|
|
252
269
|
.graphLegend [data-edge="entity"] { --edge-color: #22a879; }
|
|
253
|
-
.graphViewport { position: relative; min-height: clamp(390px, 42vw, 560px); overflow: hidden;
|
|
254
|
-
.graphCanvasControls { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap:
|
|
255
|
-
.graphCanvasControls span { display: flex; align-items: center; gap:
|
|
256
|
-
.graphCanvasControls span i { width:
|
|
257
|
-
.graphCanvasControls button { min-height:
|
|
258
|
-
.graphCanvasControls button:hover
|
|
259
|
-
.graphCanvasControls button[data-active] {
|
|
260
|
-
.graphCanvasControls button[data-active] { color: var(--mn-accent); }
|
|
270
|
+
.graphViewport { position: relative; min-height: clamp(390px, 42vw, 560px); overflow: hidden; }
|
|
271
|
+
.graphCanvasControls { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--dsw-radius-md); background: var(--dsw-specific-menu, var(--mn-layer-2)); box-shadow: var(--dsw-elevation-soft); backdrop-filter: var(--dsw-menu-backdrop-filter); }
|
|
272
|
+
.graphCanvasControls span { display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--mn-faint); font-size: 12px; }
|
|
273
|
+
.graphCanvasControls span i { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-accent); }
|
|
274
|
+
.graphCanvasControls button { min-height: 28px; border: 0; border-radius: var(--dsw-radius-sm); padding: 0 10px; color: var(--mn-muted); background: transparent; font-size: 12px; cursor: pointer; }
|
|
275
|
+
.graphCanvasControls button:hover { color: var(--mn-text); background: var(--mn-hover); }
|
|
276
|
+
.graphCanvasControls button[data-active] { color: var(--mn-text); background: var(--mn-fill); }
|
|
261
277
|
.graphSvg { display: block; width: 100%; height: clamp(390px, 42vw, 560px); touch-action: pan-y pinch-zoom; user-select: none; }
|
|
262
278
|
.graphBackdrop { fill: var(--mn-layer-1); }
|
|
263
279
|
.graphGridLine { stroke: var(--mn-line); stroke-width: .6; opacity: .5; }
|
|
@@ -277,152 +293,158 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
277
293
|
.graphNode[data-kind="entity"] { --node: #2b9db9; }
|
|
278
294
|
.nodeHalo { fill: color-mix(in srgb, var(--node) 18%, var(--mn-layer-1)); stroke: color-mix(in srgb, var(--node) 60%, var(--mn-layer-1)); stroke-width: 1.5; transition: r .16s; }
|
|
279
295
|
.nodeCore { fill: var(--node); }
|
|
280
|
-
.nodeLabel { fill: var(--mn-muted); font:
|
|
281
|
-
.nodeBodyLabel { fill: var(--mn-faint); font:
|
|
296
|
+
.nodeLabel { fill: var(--mn-muted); font: 11px var(--mn-sans); pointer-events: auto; }
|
|
297
|
+
.nodeBodyLabel { fill: var(--mn-faint); font: 500 11px var(--mn-sans); pointer-events: auto; }
|
|
282
298
|
.graphSvg[data-density="sparse"] .nodeLabel { font-size: 12px; }
|
|
283
299
|
.graphNode:hover .nodeHalo,
|
|
284
300
|
.graphNode:focus .nodeHalo,
|
|
285
301
|
.graphNode[data-selected] .nodeHalo { fill: color-mix(in srgb, var(--node) 28%, var(--mn-layer-1)); stroke: var(--node); }
|
|
286
|
-
.graphNode[data-selected] .nodeLabel { fill: var(--mn-text); font-weight:
|
|
287
|
-
.graphFooter { min-height:
|
|
288
|
-
.graphInspector { min-width: 0; min-height: calc(clamp(390px, 42vw, 560px) +
|
|
302
|
+
.graphNode[data-selected] .nodeLabel { fill: var(--mn-text); font-weight: 500; }
|
|
303
|
+
.graphFooter { min-height: 40px; border-top: .5px solid var(--mn-line); color: var(--mn-faint); }
|
|
304
|
+
.graphInspector { min-width: 0; min-height: calc(clamp(390px, 42vw, 560px) + 84px); overflow: hidden; padding: 16px; }
|
|
289
305
|
.inspectorEmpty { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
|
|
290
|
-
.inspectorLogo { width:
|
|
291
|
-
.inspectorEmpty h3 { margin:
|
|
292
|
-
.inspectorEmpty p { margin: 0; color: var(--mn-faint); font-size:
|
|
306
|
+
.inspectorLogo { width: 48px; height: 48px; margin-bottom: 12px; border-radius: var(--dsw-radius-lg); opacity: .72; }
|
|
307
|
+
.inspectorEmpty h3 { margin: 6px 0 2px; font-size: 14px; font-weight: 500; line-height: 22px; }
|
|
308
|
+
.inspectorEmpty p { margin: 0; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
293
309
|
.inspectorHeading { display: flex; align-items: center; justify-content: space-between; }
|
|
294
|
-
.inspectorHeading button { display: grid; width:
|
|
310
|
+
.inspectorHeading button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: var(--dsw-radius-sm); color: var(--mn-muted); background: transparent; cursor: pointer; }
|
|
295
311
|
.inspectorHeading button:hover { background: var(--mn-hover); }
|
|
296
|
-
.inspectorChips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top:
|
|
297
|
-
.categoryChip { display: inline-flex; padding:
|
|
312
|
+
.inspectorChips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
|
|
313
|
+
.categoryChip { display: inline-flex; padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
298
314
|
.inspectorTitleRow { display: flex; min-width: 0; align-items: flex-start; gap: 8px; margin: 12px 0 20px; }
|
|
299
|
-
.inspectorTitle { display: -webkit-box; min-width: 0; flex: 1; margin: 0; overflow: hidden; font-size: 14px; line-height:
|
|
300
|
-
.inspectorEye { display: grid; width:
|
|
301
|
-
.inspectorEye:hover { color: var(--mn-
|
|
315
|
+
.inspectorTitle { display: -webkit-box; min-width: 0; flex: 1; margin: 0; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 22px; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
|
|
316
|
+
.inspectorEye { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: .5px solid var(--mn-line-strong); border-radius: var(--dsw-radius-sm); color: var(--mn-muted); background: transparent; cursor: pointer; transition: color .15s, background-color .15s; }
|
|
317
|
+
.inspectorEye:hover { color: var(--mn-text); background: var(--mn-hover); }
|
|
302
318
|
.inspectorMeta { margin: 0; }
|
|
303
|
-
.inspectorMeta > div { display: grid; gap:
|
|
304
|
-
.inspectorMeta dt { color: var(--mn-faint); font:
|
|
305
|
-
.inspectorMeta dd { margin: 0; overflow-wrap: anywhere; color: var(--mn-muted); font-size:
|
|
319
|
+
.inspectorMeta > div { display: grid; gap: 2px; padding: 10px 0; border-top: .5px solid var(--mn-line); }
|
|
320
|
+
.inspectorMeta dt { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
321
|
+
.inspectorMeta dd { margin: 0; overflow-wrap: anywhere; color: var(--mn-muted); font-size: 13px; line-height: 20px; }
|
|
306
322
|
.inspectorActions { display: grid; gap: 8px; margin-top: 20px; }
|
|
307
|
-
.previewContent { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mn-text); font-size:
|
|
323
|
+
.previewContent { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mn-text); font-size: 14px; line-height: 22px; }
|
|
308
324
|
|
|
309
|
-
|
|
310
|
-
.
|
|
311
|
-
.queryField
|
|
312
|
-
.queryField
|
|
313
|
-
.queryField
|
|
314
|
-
.
|
|
315
|
-
.
|
|
316
|
-
.
|
|
325
|
+
/* Search: a DSH Input-style query field over the controls. */
|
|
326
|
+
.searchBar { margin-bottom: 16px; padding: 14px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
327
|
+
.queryField { display: grid; grid-template-columns: 20px minmax(0, 1fr) 24px; align-items: center; gap: 6px; padding: 0 12px; border: .5px solid var(--mn-field-line); border-radius: var(--dsw-radius-md); background: var(--mn-input); }
|
|
328
|
+
.queryField:focus-within { border-color: var(--mn-accent); }
|
|
329
|
+
.queryField > span { color: var(--mn-faint); font-size: 15px; line-height: 1; }
|
|
330
|
+
.queryField input { width: 100%; height: 40px; border: 0; outline: 0; background: transparent; font-size: 14px; }
|
|
331
|
+
.queryField input::placeholder { color: var(--dsw-alias-label-dimmed); }
|
|
332
|
+
.queryField kbd { color: var(--mn-caption); font: 12px var(--mn-sans); }
|
|
333
|
+
.searchControls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; padding-top: 12px; }
|
|
334
|
+
.searchActions { display: flex; align-items: center; gap: 8px; }
|
|
335
|
+
.agentAnswer { margin-bottom: 16px; padding: 16px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
317
336
|
.agentAnswerHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
318
|
-
.agentAnswerHeading span { color: var(--mn-
|
|
319
|
-
.agentAnswerHeading h3 { margin:
|
|
320
|
-
.agentAnswerHeading > code { color: var(--mn-faint); font-size:
|
|
321
|
-
.agentAnswer > p { margin: 12px 0; white-space: pre-wrap; color: var(--mn-text); font-size:
|
|
322
|
-
.agentCitations { display: flex; flex-wrap: wrap; gap:
|
|
323
|
-
.agentCitations code { padding:
|
|
337
|
+
.agentAnswerHeading span { color: var(--mn-faint); font-size: 12px; font-weight: 500; line-height: 18px; }
|
|
338
|
+
.agentAnswerHeading h3 { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 22px; }
|
|
339
|
+
.agentAnswerHeading > code { color: var(--mn-faint); font-size: 11px; }
|
|
340
|
+
.agentAnswer > p { margin: 12px 0; white-space: pre-wrap; color: var(--mn-text); font-size: 14px; line-height: 22px; }
|
|
341
|
+
.agentCitations { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: .5px solid var(--mn-line); }
|
|
342
|
+
.agentCitations code { padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; line-height: 17px; }
|
|
324
343
|
.searchControls label,
|
|
325
|
-
.fieldWide { display: grid; gap:
|
|
344
|
+
.fieldWide { display: grid; gap: 6px; color: var(--mn-muted); font-size: 12px; font-weight: 500; line-height: 18px; }
|
|
326
345
|
.searchControls select,
|
|
327
346
|
.listToolbar input,
|
|
328
347
|
.listToolbar select,
|
|
329
|
-
.entitySearch input { min-width: 140px; height:
|
|
348
|
+
.entitySearch input { min-width: 140px; height: 32px; border: .5px solid var(--mn-field-line); border-radius: var(--dsw-radius-md); outline: 0; padding: 0 10px; color: var(--mn-text); background: var(--mn-input); font-size: 13px; font-weight: 400; }
|
|
330
349
|
.searchControls select:focus,
|
|
331
350
|
.listToolbar input:focus,
|
|
332
351
|
.listToolbar select:focus,
|
|
333
352
|
.entitySearch input:focus,
|
|
334
353
|
.supervisedForm textarea:focus { border-color: var(--mn-accent); }
|
|
335
354
|
.singleColumn { max-width: 830px; }
|
|
336
|
-
.resultLayout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap:
|
|
355
|
+
.resultLayout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 16px; align-items: start; }
|
|
337
356
|
.results,
|
|
338
357
|
.relatedPane,
|
|
339
358
|
.entityResults { min-width: 0; }
|
|
340
|
-
.relatedPane { position: sticky; top: 12px; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow: auto; padding:
|
|
341
|
-
.relatedSource { margin: 0 0
|
|
359
|
+
.relatedPane { position: sticky; top: 12px; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); overflow: auto; padding: 14px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); scroll-margin-top: 14px; -webkit-overflow-scrolling: touch; }
|
|
360
|
+
.relatedSource { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--dsw-radius-sm); color: var(--mn-muted); background: var(--mn-fill); font-size: 13px; line-height: 20px; }
|
|
342
361
|
|
|
343
|
-
.insightCard { min-width: 0; margin-bottom:
|
|
344
|
-
.insightCard:hover {
|
|
345
|
-
.cardTop { display: flex; align-items: center; justify-content: space-between; gap:
|
|
362
|
+
.insightCard { min-width: 0; margin-bottom: 8px; padding: 14px 16px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); transition: background-color .15s; }
|
|
363
|
+
.insightCard:hover { background: color-mix(in srgb, var(--mn-hover) 50%, transparent); }
|
|
364
|
+
.cardTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
346
365
|
.badges,
|
|
347
366
|
.tags,
|
|
348
|
-
.entities { display: flex; flex-wrap: wrap; gap:
|
|
349
|
-
.badge { padding:
|
|
350
|
-
.id { color: var(--mn-faint); font:
|
|
351
|
-
.content { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height:
|
|
352
|
-
.tags { color: var(--mn-accent); font-size:
|
|
353
|
-
.entities { margin-top:
|
|
354
|
-
.entities span { padding:
|
|
355
|
-
.cardActions { display: flex; min-height:
|
|
367
|
+
.entities { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
368
|
+
.badge { padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
369
|
+
.id { color: var(--mn-faint); font-size: 11px; }
|
|
370
|
+
.content { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 22px; }
|
|
371
|
+
.tags { color: var(--mn-accent); font-size: 12px; line-height: 18px; }
|
|
372
|
+
.entities { margin-top: 8px; }
|
|
373
|
+
.entities span { padding: 1px 8px; border: .5px solid var(--mn-field-line); border-radius: 999px; color: var(--mn-faint); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
374
|
+
.cardActions { display: flex; min-height: 32px; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; border-top: .5px solid var(--mn-line); padding-top: 8px; }
|
|
356
375
|
|
|
357
|
-
.entityLayout { display: grid; grid-template-columns:
|
|
358
|
-
.entityRail { position: sticky; top: 0; padding:
|
|
359
|
-
.entitySearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap:
|
|
376
|
+
.entityLayout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
|
|
377
|
+
.entityRail { position: sticky; top: 0; padding: 12px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
378
|
+
.entitySearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
|
|
360
379
|
.entitySearch input { min-width: 0; }
|
|
361
|
-
.entityHeading { display: flex; align-items: center; justify-content: space-between; margin:
|
|
362
|
-
.entityHeading small { color: var(--mn-faint); font-size:
|
|
363
|
-
.entityList { display: grid; gap:
|
|
364
|
-
.entityList button { display: flex; min-height:
|
|
380
|
+
.entityHeading { display: flex; align-items: center; justify-content: space-between; margin: 16px 4px 6px; }
|
|
381
|
+
.entityHeading small { color: var(--mn-faint); font-size: 12px; }
|
|
382
|
+
.entityList { display: grid; gap: 2px; }
|
|
383
|
+
.entityList button { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: var(--dsw-radius-sm); padding: 0 10px; color: var(--mn-muted); background: transparent; cursor: pointer; text-align: left; }
|
|
365
384
|
.entityList button:hover,
|
|
366
385
|
.entityList button[aria-pressed="true"] { color: var(--mn-text); background: var(--mn-hover); }
|
|
386
|
+
.entityList button[aria-pressed="true"] { background: var(--mn-fill); }
|
|
367
387
|
.entityList button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
368
|
-
.entityList strong { flex: none; color: var(--mn-faint); font:
|
|
388
|
+
.entityList strong { flex: none; color: var(--mn-faint); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
|
|
369
389
|
.entityResults > .emptyState { min-height: 360px; }
|
|
370
390
|
|
|
371
|
-
.supervisedComposer { border:
|
|
391
|
+
.supervisedComposer { border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
372
392
|
.supervisedComposer { overflow: hidden; }
|
|
373
|
-
.supervisedForm { padding:
|
|
374
|
-
.supervisedHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom:
|
|
375
|
-
.supervisedHeading h3 { margin:
|
|
393
|
+
.supervisedForm { padding: 16px; }
|
|
394
|
+
.supervisedHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
|
395
|
+
.supervisedHeading h3 { margin: 2px 0 0; font-size: 16px; font-weight: 500; line-height: 24px; }
|
|
376
396
|
.sessionReady,
|
|
377
|
-
.sessionMissing { padding:
|
|
397
|
+
.sessionMissing { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
378
398
|
.sessionReady { color: var(--mn-success); background: color-mix(in srgb, var(--mn-success) 10%, transparent); }
|
|
379
399
|
.sessionMissing { color: var(--mn-danger); background: color-mix(in srgb, var(--mn-danger) 10%, transparent); }
|
|
380
|
-
.supervisedForm textarea { width: 100%; resize: vertical; border:
|
|
381
|
-
.sessionHint { margin:
|
|
400
|
+
.supervisedForm textarea { width: 100%; resize: vertical; border: .5px solid var(--mn-field-line); border-radius: var(--dsw-radius-md); outline: 0; padding: 10px 12px; color: var(--mn-text); background: var(--mn-input); font-size: 14px; line-height: 22px; }
|
|
401
|
+
.sessionHint { margin: 8px 0 0; color: var(--mn-danger); font-size: 12px; line-height: 18px; }
|
|
382
402
|
.fieldWide { grid-column: 1 / -1; }
|
|
383
|
-
.advancedWrite { border-top:
|
|
384
|
-
.advancedWrite summary { display: flex; min-height:
|
|
403
|
+
.advancedWrite { border-top: .5px solid var(--mn-line); }
|
|
404
|
+
.advancedWrite summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; cursor: pointer; list-style: none; }
|
|
405
|
+
.advancedWrite summary:hover { background: var(--mn-hover); }
|
|
385
406
|
.advancedWrite summary::-webkit-details-marker { display: none; }
|
|
386
407
|
.advancedWrite summary > span:first-child { display: grid; gap: 2px; }
|
|
387
|
-
.advancedWrite summary strong { font-size:
|
|
388
|
-
.advancedWrite summary small { color: var(--mn-faint); font-size:
|
|
389
|
-
.advancedWrite summary > span:last-child { color: var(--mn-
|
|
390
|
-
.advancedWrite[open] summary { border-bottom:
|
|
408
|
+
.advancedWrite summary strong { font-size: 13px; font-weight: 500; line-height: 20px; }
|
|
409
|
+
.advancedWrite summary small { color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
410
|
+
.advancedWrite summary > span:last-child { color: var(--mn-faint); font-size: 16px; line-height: 1; }
|
|
411
|
+
.advancedWrite[open] summary { border-bottom: .5px solid var(--mn-line); }
|
|
391
412
|
.advancedWrite[open] summary > span:last-child { font-size: 0; }
|
|
392
|
-
.advancedWrite[open] summary > span:last-child::after { content: "−"; font-size:
|
|
393
|
-
.manualForm { padding:
|
|
394
|
-
.manualActions { display: flex; align-items: center; justify-content: space-between; gap:
|
|
395
|
-
.manualActions p { max-width: 520px; margin: 0; color: var(--mn-faint); font-size:
|
|
413
|
+
.advancedWrite[open] summary > span:last-child::after { content: "−"; font-size: 16px; }
|
|
414
|
+
.manualForm { padding: 4px 16px 16px; }
|
|
415
|
+
.manualActions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
|
|
416
|
+
.manualActions p { max-width: 520px; margin: 0; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
396
417
|
|
|
397
|
-
.listToolbar { display: grid; grid-template-columns: minmax(0, 1fr)
|
|
418
|
+
.listToolbar { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 8px; padding: 12px; border: .5px solid var(--mn-card-line); border-radius: var(--dsw-radius-lg); }
|
|
398
419
|
.listToolbar input,
|
|
399
420
|
.listToolbar select { width: 100%; min-width: 0; }
|
|
400
|
-
.listNotice { margin: 10px
|
|
401
|
-
.listNotice span { margin-right:
|
|
402
|
-
.memoryList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:
|
|
421
|
+
.listNotice { margin: 10px 2px 16px; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
422
|
+
.listNotice span { margin-right: 8px; padding: 1px 8px; border-radius: 999px; color: var(--mn-success); background: color-mix(in srgb, var(--mn-success) 10%, transparent); font-size: 11px; font-weight: 500; line-height: 17px; }
|
|
423
|
+
.memoryList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
|
|
403
424
|
.memoryList .insightCard { height: 100%; margin: 0; }
|
|
404
|
-
.modalFooterNote { max-width: 54ch; margin: 0 auto 0 0; color: var(--mn-
|
|
405
|
-
.modalInlineStatus { margin: 12px 0 0; color: var(--mn-muted); font-size:
|
|
425
|
+
.modalFooterNote { max-width: 54ch; margin: 0 auto 0 0; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
426
|
+
.modalInlineStatus { margin: 12px 0 0; color: var(--mn-muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
|
|
406
427
|
.metadataDialog { display: grid; gap: 12px; }
|
|
407
|
-
.metadataToolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--mn-
|
|
408
|
-
.metadataToolbar > span { display: flex; min-width: 0; align-items: center; gap:
|
|
409
|
-
.metadataToolbar em { padding:
|
|
428
|
+
.metadataToolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--mn-faint); font-size: 12px; line-height: 18px; }
|
|
429
|
+
.metadataToolbar > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
|
|
430
|
+
.metadataToolbar em { padding: 1px 8px; border-radius: 999px; color: var(--mn-muted); background: var(--mn-fill); font-size: 11px; font-style: normal; font-weight: 500; line-height: 17px; }
|
|
410
431
|
.metadataList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
411
|
-
.metadataEmpty { grid-column: 1 / -1; padding:
|
|
412
|
-
.metadataList > label { position: relative; display: grid; min-width: 0; min-height: 76px; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap:
|
|
413
|
-
.metadataList > label
|
|
432
|
+
.metadataEmpty { grid-column: 1 / -1; padding: 20px; border-radius: var(--dsw-radius-md); color: var(--mn-faint); background: var(--mn-fill); font-size: 12px; text-align: center; }
|
|
433
|
+
.metadataList > label { position: relative; display: grid; min-width: 0; min-height: 76px; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; cursor: pointer; }
|
|
434
|
+
.metadataList > label:hover { background: var(--mn-hover); }
|
|
435
|
+
.metadataList > label[data-selected] { border-color: var(--mn-field-line); background: var(--mn-fill); }
|
|
414
436
|
.metadataList > label[data-refreshing] { overflow: hidden; }
|
|
415
|
-
.metadataList > label[data-refreshing]::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--mn-
|
|
437
|
+
.metadataList > label[data-refreshing]::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--mn-accent) 10%, transparent) 45%, transparent 70%); transform: translateX(-120%); animation: mnemon-metadata-sweep .9s ease-in-out infinite; pointer-events: none; }
|
|
416
438
|
.metadataList > label[data-refreshed] { animation: mnemon-metadata-refreshed .9s ease-out; }
|
|
417
|
-
.metadataList > label[data-failed] { border-color: color-mix(in srgb, var(--mn-danger)
|
|
439
|
+
.metadataList > label[data-failed] { border-color: color-mix(in srgb, var(--mn-danger) 40%, transparent); }
|
|
418
440
|
.metadataList > label > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
419
441
|
.metadataList > label > span { display: grid; min-width: 0; gap: 4px; }
|
|
420
|
-
.metadataList strong { overflow: hidden; font-size:
|
|
421
|
-
.metadataList small { display: -webkit-box; overflow: hidden; color: var(--mn-
|
|
442
|
+
.metadataList strong { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
|
|
443
|
+
.metadataList small { display: -webkit-box; overflow: hidden; color: var(--mn-faint); font-size: 12px; line-height: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
422
444
|
.metadataList > label > span > span { display: flex; min-width: 0; align-items: center; gap: 6px; }
|
|
423
|
-
.metadataList code { overflow: hidden; color: var(--mn-faint); font:
|
|
424
|
-
.metadataTaskStatus { min-width: 0; overflow: hidden; font:
|
|
425
|
-
.metadataTaskStatus[data-status='running'] { color: var(--mn-
|
|
445
|
+
.metadataList code { overflow: hidden; color: var(--mn-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
446
|
+
.metadataTaskStatus { min-width: 0; overflow: hidden; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
|
|
447
|
+
.metadataTaskStatus[data-status='running'] { color: var(--mn-faint); }
|
|
426
448
|
.metadataTaskStatus[data-status='success'] { color: var(--mn-success); }
|
|
427
449
|
.metadataTaskStatus[data-status='error'] { color: var(--mn-danger); }
|
|
428
450
|
@media (prefers-reduced-motion: reduce) { .metadataList > label[data-refreshing]::after,
|
|
@@ -430,7 +452,7 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
430
452
|
|
|
431
453
|
@media (max-width: 1000px) {
|
|
432
454
|
.graphLayout { position: relative; display: block; }
|
|
433
|
-
.graphInspector { position: static; width: auto; min-height: 0; margin-top:
|
|
455
|
+
.graphInspector { position: static; width: auto; min-height: 0; margin-top: 12px; overflow: visible; box-shadow: none; }
|
|
434
456
|
.graphInspector[data-empty] { display: none; }
|
|
435
457
|
.resultLayout { grid-template-columns: 1fr; }
|
|
436
458
|
.relatedPane { position: static; grid-row: 1; max-height: none; }
|
|
@@ -439,7 +461,7 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
439
461
|
|
|
440
462
|
@media (max-width: 760px) {
|
|
441
463
|
.metadataList { grid-template-columns: 1fr; }
|
|
442
|
-
.modalFooterNote { max-width: none; margin: 0;
|
|
464
|
+
.modalFooterNote { max-width: none; margin: 0; }
|
|
443
465
|
.modal .supervisedForm textarea { min-height: clamp(130px, 30vh, 210px); }
|
|
444
466
|
.entityLayout { grid-template-columns: 1fr; }
|
|
445
467
|
.manualActions { align-items: stretch; flex-direction: column; }
|
|
@@ -461,7 +483,7 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
461
483
|
.providerAdvancedGrid { grid-template-columns: 1fr; }
|
|
462
484
|
.graphViewport { min-height: 360px; }
|
|
463
485
|
.graphSvg { height: 390px; }
|
|
464
|
-
.graphCanvasControls { right:
|
|
486
|
+
.graphCanvasControls { right: 8px; top: 8px; }
|
|
465
487
|
.graphCanvasControls span { display: none; }
|
|
466
488
|
}
|
|
467
489
|
|
|
@@ -484,7 +506,3 @@ button.readSourceCard:hover { border-color: color-mix(in srgb, var(--mn-provider
|
|
|
484
506
|
.graphViewport { min-height: 300px; }
|
|
485
507
|
.graphSvg { height: 300px; }
|
|
486
508
|
}
|
|
487
|
-
|
|
488
|
-
@media (prefers-reduced-motion: reduce) {
|
|
489
|
-
.insightCard:hover { transform: none; }
|
|
490
|
-
}
|