b1dbd02Switch sampling to pure-WASI web workers; add results dashboardJeremy Magland 1/* The sampling-results dashboard pane, themed with --vscode-* variables
2 * (same spirit as the .sample form editor). */
4.results-view {
5 height: 100%;
6 overflow-y: auto;
7 background-color: var(--vscode-editor-background);
8 color: var(--vscode-foreground);
9 font-family: system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
10 font-size: 13px;
11}
13.results-inner {
14 max-width: 1000px;
15 margin: 0 auto;
16 padding: 24px 32px 48px;
17}
19.results-view h2 {
20 margin: 0 0 2px;
21 font-size: 20px;
22 font-weight: 400;
23}
25.results-subtitle {
26 margin: 0 0 14px;
27 color: var(--vscode-descriptionForeground);
28 font-size: 12px;
29}
31.results-tabs {
32 display: flex;
33 gap: 2px;
34 margin-bottom: 14px;
35 border-bottom: 1px solid var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.35));
36}
38.results-tab {
39 padding: 6px 12px;
40 font-size: 13px;
41 font-family: inherit;
42 cursor: pointer;
43 border: none;
44 background: none;
45 color: var(--vscode-descriptionForeground);
46 border-bottom: 2px solid transparent;
47 margin-bottom: -1px;
48}
50.results-tab:hover {
51 color: var(--vscode-foreground);
52}
54.results-tab.active {
55 color: var(--vscode-foreground);
56 border-bottom-color: var(--vscode-focusBorder, #0e70c0);
57}
59.results-error {
60 padding: 8px 10px;
61 border-left: 3px solid var(--vscode-editorWarning-foreground, #cca700);
62 background-color: var(--vscode-inputValidation-warningBackground, rgba(90, 73, 29, 0.4));
63 white-space: pre-wrap;
64}
66.results-note {
67 margin: 0 0 10px;
68 color: var(--vscode-descriptionForeground);
69 font-size: 12px;
70}
72/* --- tables (summary, draws) --- */
74.results-table-scroll {
75 overflow: auto;
76 max-height: calc(100vh - 220px);
77 border: 1px solid var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.35));
78}
80.results-table {
81 border-collapse: collapse;
82 font-size: 12px;
83 font-variant-numeric: tabular-nums;
84 white-space: nowrap;
85}
87.results-table th {
88 position: sticky;
89 top: 0;
90 background-color: var(--vscode-editorWidget-background, var(--vscode-editor-background));
91 text-align: right;
92 font-weight: 600;
93 padding: 4px 10px;
94 border-bottom: 1px solid var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.35));
95}
97.results-table th:first-child {
98 text-align: left;
99}
101.results-table td {
102 padding: 3px 10px;
103 border-bottom: 1px solid rgba(128, 128, 128, 0.12);
104}
106.results-table td.num {
107 text-align: right;
108}
110.results-table td.name {
111 color: var(--vscode-descriptionForeground);
112}
114.results-table td.warn {
115 color: var(--vscode-editorWarning-foreground, #cca700);
116}
118.results-table td.bad {
119 color: var(--vscode-editorError-foreground, #f48771);
120 font-weight: 600;
121}
123/* --- plots --- */
125.results-grid {
126 display: grid;
127 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
128 gap: 14px;
129}
131.results-plot-card {
132 border: 1px solid var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.25));
133 border-radius: 3px;
134 padding: 6px 6px 2px;
135}
137.results-plot-card.wide {
138 margin-bottom: 14px;
139}
141.results-plot-title {
142 font-size: 12px;
143 font-weight: 600;
144 padding: 2px 6px 4px;
145}
147.results-plot {
148 height: 200px;
149}
151.results-plot-card.wide .results-plot {
152 height: 180px;
153}
155.results-plot-card.tall .results-plot {
156 height: 420px;
157}
159/* --- controls (scatter axes, draws chain) --- */
161.results-controls {
162 display: flex;
163 align-items: center;
164 gap: 16px;
165 margin-bottom: 10px;
166}
168.results-controls .results-note {
169 margin: 0;
170}
172.results-control {
173 display: flex;
174 align-items: center;
175 gap: 6px;
176 font-weight: 600;
177}
179.results-control select {
180 padding: 3px 6px;
181 font-size: 12px;
182 font-family: inherit;
183 color: var(--vscode-input-foreground);
184 background-color: var(--vscode-input-background);
185 border: 1px solid var(--vscode-input-border, transparent);
186 border-radius: 2px;
187 max-width: 220px;
188}
190.results-chain-legend {
191 display: flex;
192 flex-wrap: wrap;
193 gap: 12px;
194 margin-bottom: 10px;
195 font-size: 12px;
196 color: var(--vscode-descriptionForeground);
197}
199.results-chain-chip {
200 display: inline-flex;
201 align-items: center;
202 gap: 5px;
203}
205.results-chain-swatch {
206 width: 10px;
207 height: 10px;
208 border-radius: 2px;
209 display: inline-block;
210}
212.results-console {
213 margin: 0;
214 padding: 10px;
215 font-family: var(--monaco-monospace-font, monospace);
216 font-size: 12px;
217 white-space: pre-wrap;
218 background-color: var(--vscode-editorWidget-background, rgba(128, 128, 128, 0.08));
219 border: 1px solid var(--vscode-editorWidget-border, rgba(128, 128, 128, 0.25));
220}