21efcb6stan web IDE: run Stan sampling in the browserJeremy Magland 1/* The .sample form editor pane, themed with --vscode-* variables in the
2 * spirit of VS Code's settings editor. */
4.sample-editor {
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.sample-editor-inner {
14 max-width: 640px;
15 margin: 0 auto;
16 padding: 24px 32px 48px;
17}
19.sample-editor h2 {
20 margin: 0 0 2px;
21 font-size: 20px;
22 font-weight: 400;
23}
25.sample-editor-subtitle {
26 margin: 0 0 18px;
27 color: var(--vscode-descriptionForeground);
28 font-size: 12px;
29}
31.sample-field {
32 margin-bottom: 14px;
33}
35.sample-field label {
36 display: block;
37 margin-bottom: 4px;
38 font-weight: 600;
39}
41.sample-field .sample-field-hint {
42 margin-left: 8px;
43 font-weight: 400;
44 color: var(--vscode-descriptionForeground);
45 font-size: 12px;
46}
48.sample-field input,
49.sample-field select {
50 width: 260px;
51 max-width: 100%;
52 padding: 4px 6px;
53 font-size: 13px;
54 font-family: inherit;
55 color: var(--vscode-input-foreground);
56 background-color: var(--vscode-input-background);
57 border: 1px solid var(--vscode-input-border, transparent);
58 border-radius: 2px;
59 outline: none;
60 box-sizing: border-box;
61}
63.sample-field input:focus,
64.sample-field select:focus {
65 border-color: var(--vscode-focusBorder);
66}
68.sample-params {
69 display: grid;
70 grid-template-columns: repeat(auto-fill, 150px);
71 gap: 12px 18px;
72 margin-bottom: 14px;
73}
75.sample-params .sample-field {
76 margin-bottom: 0;
77}
79.sample-params input {
80 width: 100%;
81}
83.sample-problems {
84 margin: 0 0 14px;
85 padding: 8px 10px;
86 border-left: 3px solid var(--vscode-editorError-foreground, #f48771);
87 background-color: var(--vscode-inputValidation-errorBackground, rgba(90, 29, 29, 0.4));
88 white-space: pre-wrap;
89}
91.sample-problems.warnings {
92 border-left-color: var(--vscode-editorWarning-foreground, #cca700);
93 background-color: var(--vscode-inputValidation-warningBackground, rgba(90, 73, 29, 0.4));
94}
96.sample-run-row {
97 display: flex;
98 align-items: center;
99 gap: 12px;
b1dbd02Switch sampling to pure-WASI web workers; add results dashboardJeremy Magland 100 margin: 4px 0 6px;
101}
103.sample-output-note {
104 margin: 0 0 18px;
105 color: var(--vscode-descriptionForeground);
106 font-size: 12px;
109.sample-run-button {
110 padding: 6px 18px;
111 font-size: 13px;
112 font-family: inherit;
113 cursor: pointer;
114 border-radius: 3px;
115 border: 1px solid var(--vscode-button-border, transparent);
116 background-color: var(--vscode-button-background);
117 color: var(--vscode-button-foreground);
118}
120.sample-run-button:hover {
121 background-color: var(--vscode-button-hoverBackground);
122}
124.sample-run-button:disabled {
125 opacity: 0.5;
126 cursor: default;
127}
129.sample-run-button.stop {
130 background-color: var(--vscode-button-secondaryBackground);
131 color: var(--vscode-button-secondaryForeground);
132}
b1dbd02Switch sampling to pure-WASI web workers; add results dashboardJeremy Magland 134.sample-results-button {
135 padding: 6px 14px;
136 font-size: 13px;
137 font-family: inherit;
138 cursor: pointer;
139 border-radius: 3px;
140 border: 1px solid var(--vscode-button-border, transparent);
141 background-color: var(--vscode-button-secondaryBackground);
142 color: var(--vscode-button-secondaryForeground);
143}
145.sample-results-button:hover {
146 background-color: var(--vscode-button-secondaryHoverBackground, var(--vscode-button-secondaryBackground));
147}
150 color: var(--vscode-descriptionForeground);
151}
153.sample-run-status.error {
154 color: var(--vscode-editorError-foreground, #f48771);
155 white-space: pre-wrap;
156}
158.sample-run-status.done {
159 color: var(--vscode-charts-green, #89d185);
160}
162.sample-chains {
163 display: flex;
164 flex-direction: column;
165 gap: 6px;
b1dbd02Switch sampling to pure-WASI web workers; add results dashboardJeremy Magland 166 margin: 0 0 18px;
167}
169.sample-chains:empty {
170 display: none;
173.sample-chain {
174 display: flex;
175 align-items: center;
176 gap: 10px;
177}
179.sample-chain-label {
180 width: 200px;
181 font-size: 12px;
182 color: var(--vscode-descriptionForeground);
183 font-variant-numeric: tabular-nums;
184 white-space: nowrap;
185}
187.sample-chain-bar {
188 flex: 1;
189 height: 6px;
190 border-radius: 3px;
191 background-color: var(--vscode-input-background);
192 overflow: hidden;
193}
195.sample-chain-fill {
196 height: 100%;
197 width: 0;
198 border-radius: 3px;
199 background-color: var(--vscode-progressBar-background, #0e70c0);
200 transition: width 0.15s ease-out;
201}
203.sample-chain-fill.warmup {
204 opacity: 0.55;
205}