openguessr-ui 0.2.2 → 0.2.4
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
CHANGED
|
@@ -23,17 +23,17 @@ These core concepts define how UI should be structured.
|
|
|
23
23
|
|
|
24
24
|
### Hierarchy
|
|
25
25
|
|
|
26
|
-
1. Every element starts in layout space (level 1), where `--layout-margin` defines the spacing between grouped elements,
|
|
26
|
+
1. Every element starts in layout space (level 1), where `--layout-margin` defines the spacing between grouped elements, and `--layout-spacer` the spacing between unrelated ones. Panels with a `--box-margin` border radius are an exception, see [Panels](#panels).
|
|
27
27
|
|
|
28
|
-
2. The second level is containers, where the spacing and padding is `--box-margin
|
|
28
|
+
2. The second level is containers, where the spacing and padding is `--box-margin`. Containers have a border radius of `--layout-margin`.
|
|
29
29
|
|
|
30
|
-
3. The third level is boxes, where the spacing and padding is
|
|
30
|
+
3. The third level is boxes, where the spacing and padding is also `--box-margin`, but they have a border radius of `--box-margin`.
|
|
31
31
|
|
|
32
|
-
4. On the fourth level there is either content or smaller boxes. Smaller boxes still use `--box-margin` for padding and spacing
|
|
32
|
+
4. On the fourth level there is either content or smaller boxes. Smaller boxes still use `--box-margin` for padding and spacing. Both content and smaller boxes use `--content-margin` for border radii.
|
|
33
33
|
|
|
34
34
|
The content level (inside buttons, chips, tabs, or other controls) uses spacing of `--content-margin`. Placing content directly into layouts or containers is not allowed, it needs to sit inside a box or panel.
|
|
35
35
|
|
|
36
|
-
Popups take some properties from layouts and some from containers. They use `--layout-margin` for spacing, but content inside them is boxes (level 3)
|
|
36
|
+
Popups take some properties from layouts and some from containers. They use `--layout-margin` for spacing, but content inside them is boxes (level 3).
|
|
37
37
|
|
|
38
38
|
## Styling
|
|
39
39
|
|
|
@@ -133,7 +133,10 @@ Panels that house large buttons which are rounder than usual buttons should have
|
|
|
133
133
|
|
|
134
134
|
When panels sit inside layouts with a strong background color (e.g. `--overlay-color-dark`), their background color should be `--box-color` instead of `--panel-color` to avoid layering two blue-ish tones (which will produce a color that looks too vibrant).
|
|
135
135
|
|
|
136
|
-
The gap
|
|
136
|
+
The gap between related panels and their spacing to the viewport edges should match their border radius. That means using `--box-margin` for panels with a `--box-margin` border radius, and `--layout-margin` for panels with a `--layout-margin` border radius.
|
|
137
|
+
|
|
138
|
+
> [!IMPORTANT]
|
|
139
|
+
> This applies even though panels sit in layout space, where `--layout-margin` would otherwise be the default. This exception exists because panels are the only core element that can sit in layout space with a border radius below `--layout-margin`.
|
|
137
140
|
|
|
138
141
|
### Containers
|
|
139
142
|
|
|
@@ -242,6 +245,7 @@ The popup component is used for dialogs. It takes the following props:
|
|
|
242
245
|
- `open`: Whether the popup is open
|
|
243
246
|
- `slim`: Reduces the max width
|
|
244
247
|
- `verySlim`: Reduces the max width further
|
|
248
|
+
- `ultraSlim`: Reduces the max width even further
|
|
245
249
|
- `frameless`: Reduces the padding, e.g. for iframes
|
|
246
250
|
- `onuserclose`: Called when the user closes the popup
|
|
247
251
|
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
.error-code {
|
|
30
30
|
opacity: 70%;
|
|
31
31
|
padding: var(--box-margin);
|
|
32
|
-
padding-inline:
|
|
33
|
-
border-radius:
|
|
32
|
+
padding-inline: var(--layout-margin);
|
|
33
|
+
border-radius: var(--box-margin);
|
|
34
34
|
font-size: 14px;
|
|
35
35
|
line-height: 22px;
|
|
36
36
|
font-family: monospace;
|
package/components/Popup.svelte
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { backOut } from "svelte/easing";
|
|
9
9
|
import { fade, scale } from "svelte/transition";
|
|
10
10
|
|
|
11
|
-
let { children, frameless, slim, verySlim, open = $bindable(false), onuserclose } = $props();
|
|
11
|
+
let { children, frameless, slim, verySlim, ultraSlim, open = $bindable(false), onuserclose } = $props();
|
|
12
12
|
|
|
13
13
|
let zIndex = $state(0);
|
|
14
14
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
class="ui-window"
|
|
66
66
|
transition:scale={{ easing: backOut, duration: 250, start: 0.9 }}
|
|
67
67
|
class:frame-less={frameless}
|
|
68
|
-
style:max-width={verySlim ? "600px" : slim ? "750px" : "850px"}
|
|
68
|
+
style:max-width={ultraSlim ? "450px" : verySlim ? "600px" : slim ? "750px" : "850px"}
|
|
69
69
|
>
|
|
70
70
|
<button class="close-popup-button standard-button bright" aria-label="close" onclick={close}
|
|
71
71
|
><X strokeWidth={2.25} /></button
|