@filipgutica/ui 1.6.0 → 1.8.0
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/README.md +5 -4
- package/dist/components/UiFigure.vue.d.ts +16 -0
- package/dist/components/UiScore.vue.d.ts +7 -0
- package/dist/components/UiToggleButton.vue.d.ts +23 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +171 -85
- package/dist/site/UiCommandList.vue.d.ts +4 -0
- package/dist/site.js +126 -111
- package/package.json +1 -1
- package/src/components.css +133 -6
- package/src/site.css +26 -0
package/src/site.css
CHANGED
|
@@ -170,6 +170,7 @@
|
|
|
170
170
|
* screen background with --site-capture-bg on :root, which also reaches the
|
|
171
171
|
* full-size viewer. Nothing clips the panel, so focus rings inside it stay whole. */
|
|
172
172
|
.fg-capture {
|
|
173
|
+
position: relative;
|
|
173
174
|
min-width: 0;
|
|
174
175
|
border: 1px solid var(--color-border-subtle);
|
|
175
176
|
border-radius: var(--radius-panel);
|
|
@@ -177,6 +178,27 @@
|
|
|
177
178
|
}
|
|
178
179
|
.fg-capture .fg-tabs__list { width: 100%; margin-block-end: 0; padding-inline: var(--space-2); }
|
|
179
180
|
.fg-capture .fg-tabs__tab { min-height: var(--control-lg); }
|
|
181
|
+
/* The Full size control sits at the end of the tab row; the list reserves its width. */
|
|
182
|
+
.fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + 6.5rem); }
|
|
183
|
+
.fg-capture__full {
|
|
184
|
+
position: absolute;
|
|
185
|
+
top: 0;
|
|
186
|
+
right: var(--space-2);
|
|
187
|
+
display: inline-flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: var(--space-1);
|
|
190
|
+
min-height: var(--control-lg);
|
|
191
|
+
padding-inline: var(--space-2);
|
|
192
|
+
border: 0;
|
|
193
|
+
border-radius: var(--radius-control);
|
|
194
|
+
background: transparent;
|
|
195
|
+
color: var(--color-muted);
|
|
196
|
+
font: var(--text-sm) / var(--leading) var(--font-ui);
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
}
|
|
199
|
+
.fg-capture__full:hover { color: var(--color-text); }
|
|
200
|
+
.fg-capture__full svg { width: 14px; height: 14px; flex: none; }
|
|
201
|
+
.fg-capture__full:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
|
|
180
202
|
/* Without JavaScript every capture is listed under its own heading. */
|
|
181
203
|
.fg-capture .fg-tabs__heading { margin: 0; padding: var(--space-3) var(--space-4); }
|
|
182
204
|
.fg-capture:not([data-enhanced="true"]) .fg-tabs__panel + .fg-tabs__panel { border-top: 1px solid var(--color-border-subtle); }
|
|
@@ -407,6 +429,10 @@
|
|
|
407
429
|
}
|
|
408
430
|
@media (max-width: 640px) {
|
|
409
431
|
.fg-dialog__content.fg-capture-viewer { width: 100%; max-width: none; }
|
|
432
|
+
/* Phones keep the icon; the accessible name still says Full size. */
|
|
433
|
+
.fg-capture[data-enhanced="true"] .fg-tabs__list { padding-inline-end: calc(var(--space-2) + var(--control-lg)); }
|
|
434
|
+
.fg-capture__full { min-width: var(--control-lg); justify-content: center; }
|
|
435
|
+
.fg-capture__full-label { display: none; }
|
|
410
436
|
.fg-command-list__table,
|
|
411
437
|
.fg-command-list tbody { display: block; }
|
|
412
438
|
.fg-command-list thead {
|