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;
100 margin: 18px 0 10px;
101}
103.sample-run-button {
104 padding: 6px 18px;
105 font-size: 13px;
106 font-family: inherit;
107 cursor: pointer;
108 border-radius: 3px;
109 border: 1px solid var(--vscode-button-border, transparent);
110 background-color: var(--vscode-button-background);
111 color: var(--vscode-button-foreground);
112}
114.sample-run-button:hover {
115 background-color: var(--vscode-button-hoverBackground);
116}
118.sample-run-button:disabled {
119 opacity: 0.5;
120 cursor: default;
121}
123.sample-run-button.stop {
124 background-color: var(--vscode-button-secondaryBackground);
125 color: var(--vscode-button-secondaryForeground);
126}
128.sample-run-status {
129 color: var(--vscode-descriptionForeground);
130}
132.sample-run-status.error {
133 color: var(--vscode-editorError-foreground, #f48771);
134 white-space: pre-wrap;
135}
137.sample-run-status.done {
138 color: var(--vscode-charts-green, #89d185);
139}
141.sample-chains {
142 display: flex;
143 flex-direction: column;
144 gap: 6px;
145 margin-top: 8px;
146}
148.sample-chain {
149 display: flex;
150 align-items: center;
151 gap: 10px;
152}
154.sample-chain-label {
155 width: 200px;
156 font-size: 12px;
157 color: var(--vscode-descriptionForeground);
158 font-variant-numeric: tabular-nums;
159 white-space: nowrap;
160}
162.sample-chain-bar {
163 flex: 1;
164 height: 6px;
165 border-radius: 3px;
166 background-color: var(--vscode-input-background);
167 overflow: hidden;
168}
170.sample-chain-fill {
171 height: 100%;
172 width: 0;
173 border-radius: 3px;
174 background-color: var(--vscode-progressBar-background, #0e70c0);
175 transition: width 0.15s ease-out;
176}
178.sample-chain-fill.warmup {
179 opacity: 0.55;
180}