@gemboss/ui 0.41.0 → 0.42.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/CHANGELOG.md +59 -0
- package/README.md +7 -3
- package/catalog/editor.html +9 -7
- package/catalog/index.html +11 -4
- package/gemboss-ui.css +1 -1
- package/package.json +1 -1
- package/parts/components.css +1 -1
- package/parts/core.css +1 -1
- package/parts/shell.css +1 -1
- package/src/editor/controls.tsx +52 -8
- package/src/editor/index.ts +2 -2
- package/src/editor/swatch.ts +133 -9
- package/src/editor-plain.js +1 -1
- package/src/index.ts +2 -2
- package/src/portal.tsx +12 -6
- package/src/reactions-data.ts +13 -0
- package/src/reactions.tsx +5 -5
- package/src/team-chat-data.ts +46 -13
- package/src/team-chat-plain.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
Versions up to 0.9.0 are described in the README, each in the section that introduced it.
|
|
4
4
|
|
|
5
|
+
## 0.42.0 (21/10/2026)
|
|
6
|
+
|
|
7
|
+
**The editor's colour field offers the page's theme colours and this store's recent colours** (gemboss #4888, Chris "bấm
|
|
8
|
+
trước gõ sau").
|
|
9
|
+
|
|
10
|
+
Added
|
|
11
|
+
- `ColorControl` takes `choices` (`ColorChoice { value, label, swatch }`): chips under the field while it is in use; a chip
|
|
12
|
+
writes its `value` (a theme chip writes `var(--gem-color-<role>)`). `themeColorChoices(palette)` lists the theme's roles in
|
|
13
|
+
`TOKEN_NAMES` order. No new CSS: `.gemboss-ei-swatches` / `.gemboss-ei-sw`.
|
|
14
|
+
|
|
15
|
+
**Team chat days in a given time zone; leaderboard words in the page's language** (follow-ups of GemCommunity's UX audit,
|
|
16
|
+
20–21/10/2026: /chat threw React #418 because the server (UTC) and a browser in Hanoi drew different day separators, and the
|
|
17
|
+
app had to feed the rules shifted dates; the podium's screen-reader words were English on vi and zh pages).
|
|
18
|
+
|
|
19
|
+
Added
|
|
20
|
+
- `timeZone` (IANA name) on `teamChatRows` options and as a last argument of `chatDayKey` and `chatDayWord`: days are that
|
|
21
|
+
zone's calendar days. An unknown name or an invalid date falls back to the local day, as without it.
|
|
22
|
+
- `chatDayISO(at, timeZone?)`: the day as "2026-10-21", for a `DaySeparator`'s `dateTime`.
|
|
23
|
+
- Plain script: `gembossUI.teamChat.rows` reads `opts.timeZone`; `dayKey`, `dayWord` take it last; `dayISO` is new. Held to
|
|
24
|
+
the TypeScript by `team-chat-plain-data.test.ts` under four zones (one unknown).
|
|
25
|
+
- `Podium`: `label` (the list's name, default "Top three") and `rankLabel` (default `(n) => "Rank " + n`); `Leaderboard`:
|
|
26
|
+
`rankLabel`. Defaults keep the markup as it was.
|
|
27
|
+
|
|
28
|
+
**"Frequently used" in the reaction picker always holds nine** (Chris 20/10/2026: GemCare's row held nine; the package's showed
|
|
29
|
+
only what this browser had used, one or two for a new person, which read as empty).
|
|
30
|
+
|
|
31
|
+
Changed
|
|
32
|
+
- `ReactionPicker` (React) and `gembossUI.teamChat.reactionPicker` (plain): "Frequently used" is what this browser used, most
|
|
33
|
+
recent first, then the `SUGGESTED_REACTIONS` it has not used (👍 ✅ 🙏 🎉 😂 ❤️ 👀 🙌 🔥), nine in all.
|
|
34
|
+
- `reactions-data.ts` exports `SUGGESTED_REACTIONS`, `FREQUENT_MAX` and `frequentReactions(recent)`. The plain script carries
|
|
35
|
+
the list in its data block and the same function in ES5, held to the TypeScript by `team-chat-plain-data.test.ts`.
|
|
36
|
+
|
|
5
37
|
## 0.41.0 (20/10/2026)
|
|
6
38
|
|
|
7
39
|
**A document read over its list** (Chris 20/10/2026, after GemMedia's and partner-radar's Docs drew the same popup with
|
|
@@ -17,6 +49,33 @@ Added
|
|
|
17
49
|
- `reader-dialog.test.tsx` (markup, every class styled, selectors), `reader-dialog-browser.test.tsx` (Chromium: size,
|
|
18
50
|
fill, scroll, phone head, page lock, Escape; negative control without the entry finds the 460px popup).
|
|
19
51
|
|
|
52
|
+
**A colour field reads every colour, not only a 6-digit hex** (A4, 21/10/2026). Measured on 169 element pages: of 3,283 colour
|
|
53
|
+
values, 66% are `rgb()`, 17% `rgba()`, 9% a 6-digit hex, ~3% `oklch()`. Only the hex 9% had a swatch: nine colours in ten showed a
|
|
54
|
+
locked black square.
|
|
55
|
+
|
|
56
|
+
Changed
|
|
57
|
+
- `swatchState` shows any one colour (`parseColor`: hex of 3, 4, 6 or 8 digits, `rgb`/`rgba`, `hsl`/`hsla`, `oklch`). A token, a
|
|
58
|
+
gradient, a scheme id or a padded value is still not a colour the swatch can stand for: off, with the reason.
|
|
59
|
+
- `ColorControl`: a pick on the swatch keeps the value's transparency and way of writing (`pickSwatch`: a hex stays a hex, else
|
|
60
|
+
`rgb()`, `rgba()` with an alpha), so turning the swatch on can never drop an alpha. A colour's opacity sits beside it in a `%`
|
|
61
|
+
box (`input[data-alpha]`, `withOpacity`); a value that is not one colour has none. No CSS change (the box's width is inline).
|
|
62
|
+
- `swatchWhy`: "Type a color to use your own"; the kept-as-written reason names what the swatch reads.
|
|
63
|
+
- `editor-plain.js`: the same swatch and `%` box on a page without React, for a hex and `rgb()`/`rgba()` (92% of the colours
|
|
64
|
+
measured); `hsl()` and `oklch()` stay a locked swatch there (named in editor-panel.test.tsx). Exposes `gembossUI.colorOf`,
|
|
65
|
+
`pickSwatch`, `withOpacity`.
|
|
66
|
+
|
|
67
|
+
Added
|
|
68
|
+
- `parseColor`, `pickSwatch`, `opacityOf`, `withOpacity`, type `Rgba` (from `@gemboss/ui/editor`).
|
|
69
|
+
|
|
70
|
+
**A colour field offers colours to click before one to type** (A4b, 21/10/2026; Chris: "bấm trước gõ sau").
|
|
71
|
+
|
|
72
|
+
Added
|
|
73
|
+
- `ColorControl` `choices`: chips under the field while it is in use (focus inside it), each a `ColorChoice` `{ value, label,
|
|
74
|
+
swatch }`: the value written on a click, its name, the colour it paints. A token value painted by a chip shows that colour on the
|
|
75
|
+
swatch, and a pick on the swatch then starts from it. None drawn in SSR or when `choices` is empty.
|
|
76
|
+
- `themeColorChoices(palette)`: the theme's colour roles as choices (`var(--gem-color-<role>)`, in `TOKEN_NAMES` order), painted
|
|
77
|
+
with the colour the page draws for each; a role the palette does not paint is left out. Type `ColorChoice`.
|
|
78
|
+
|
|
20
79
|
**The team chat's rows for a plain page, from the package: `gembossUI.teamChat`** (Chris 20/10/2026: the markup in ONE place,
|
|
21
80
|
so GemCare stops writing it by hand and a change to it is made once).
|
|
22
81
|
|
package/README.md
CHANGED
|
@@ -1589,7 +1589,8 @@ import { Avatar, Dialog, Leaderboard, Podium, SearchDialog, ThemeToggle, themeSc
|
|
|
1589
1589
|
Opt-in: a surface without it (the admin) stays light.
|
|
1590
1590
|
- `Avatar` (24 · 32 · 40 · 56): picture or initials on one of eight tones picked from the name.
|
|
1591
1591
|
- `Leaderboard`: 🥇 🥈 🥉 then the rank, avatar, name, count; the leader's count in gold; nothing at
|
|
1592
|
-
all when empty. `Podium`: the first three, second · first · third.
|
|
1592
|
+
all when empty. `Podium`: the first three, second · first · third. Screen readers hear "Rank 1: " before each
|
|
1593
|
+
name and "Top three" for the podium; pass `rankLabel={(n) => …}` (both) and `label` (Podium) in the page's language.
|
|
1593
1594
|
- `initialsOf` moved to `initials.ts` (plain, not "use client") so server components can call it; it is
|
|
1594
1595
|
still exported from the package and from account.tsx.
|
|
1595
1596
|
- **Without the whole kit (0.7.2):** a surface with its own skin (GemCommunity) takes only these pieces'
|
|
@@ -1714,7 +1715,10 @@ own state (the reaction picker a message opened, the composer's text when the ap
|
|
|
1714
1715
|
write themselves is in `TEAM_CHAT_LABELS`; pass `labels` (any subset) to translate. `teamChatRows(messages, { meId,
|
|
1715
1716
|
isUnread })` (plain TS, `team-chat-data.ts`) says where the day separators and the "New messages" line go and which
|
|
1716
1717
|
messages are `grouped`: same author, same day, under 5 minutes apart, not a reply, and not the first new one (GemCare's
|
|
1717
|
-
rules). `chatDayWord` gives "Today" / "Yesterday"; older days the app formats in its own locale.
|
|
1718
|
+
rules). `chatDayWord` gives "Today" / "Yesterday"; older days the app formats in its own locale. Days are the viewer's
|
|
1719
|
+
local days unless `timeZone` (an IANA name) is given to `teamChatRows`, `chatDayKey`, `chatDayWord` and `chatDayISO` (the day
|
|
1720
|
+
as "2026-10-21", for a `DaySeparator`'s `dateTime`): give it on a screen the server renders first, or the server's zone and
|
|
1721
|
+
the browser's draw different day separators (React #418). Format the times with the same zone.
|
|
1718
1722
|
|
|
1719
1723
|
**The layout.** `.gb-tc` is a CSS grid and a size container: it decides by its OWN width (in an app shell the chat is the
|
|
1720
1724
|
window minus the shell's rail), with container queries. `TEAM_CHAT_DRAWER_MAX` (1100) and `TEAM_CHAT_PHONE_MAX` (760) are the
|
|
@@ -2155,7 +2159,7 @@ after `kit-plain.js` when the page has it (it adds `gembossUI.teamChat`; loaded
|
|
|
2155
2159
|
| `peopleSection({ label, count, id, items })`, `personRow(props)` | `PeopleSection`, `PersonRow` (a link, a button with `onSelect`, else a `div`) |
|
|
2156
2160
|
| `reactions(props)`, `reactionPicker(props)` | `Reactions` (plus `open` / `onOpenChange`), `ReactionPicker` |
|
|
2157
2161
|
| `avatar({ name, src, size, className })`, `icon(name, size)` | `Avatar` (portal.tsx's initials and tone), `Icon` (the icons the builders draw, and `more`) |
|
|
2158
|
-
| `rows(messages, opts)`, `dayKey(at)`, `dayWord(at, now)` | `teamChatRows`, `chatDayKey`, `chatDayWord` |
|
|
2162
|
+
| `rows(messages, opts)`, `dayKey(at, timeZone)`, `dayISO(at, timeZone)`, `dayWord(at, now, timeZone)` | `teamChatRows`, `chatDayKey`, `chatDayISO`, `chatDayWord` |
|
|
2159
2163
|
| `LABELS` | `TEAM_CHAT_LABELS`; `labels` (any subset) translates, functions included |
|
|
2160
2164
|
|
|
2161
2165
|
```html
|
package/catalog/editor.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
.cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
|
|
9
9
|
.cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
|
|
10
10
|
.cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
|
|
11
|
-
<h1>@gemboss/ui 0.
|
|
11
|
+
<h1>@gemboss/ui 0.42.0 · Editor</h1>
|
|
12
12
|
<p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
|
|
13
13
|
<h2>React</h2><pre class="cat-api"><code>import "@gemboss/ui/editor.css";
|
|
14
14
|
import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from "@gemboss/ui/editor";
|
|
@@ -319,7 +319,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
319
319
|
<Field label="Padding"><EdgeBox label="Padding" values={pad} onChange={(side, raw) => …} onCommit={save} /></Field>
|
|
320
320
|
<Field label="Image" htmlFor="img"><ImageControl id="img" value={url} onChange={setUrl} /></Field>
|
|
321
321
|
</InspectorGroup></code></pre>
|
|
322
|
-
<figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/editor.css"></head><body><div class="gemboss-ec" style="width:360px;height:1040px"><div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels"><button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button><button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button></div><div class="gemboss-ec-dock-body" style="padding:0"><aside class="gemboss-ei gemboss-ei--docked" role="region" aria-label="Settings — Hero"><header class="gemboss-ei-head"><span class="gemboss-ei-title">Hero<small>hero-banner.default.v1</small></span><button type="button" class="gemboss-ei-act" title="Duplicate section" aria-label="Duplicate section">⧉</button><button type="button" class="gemboss-ei-act" title="Restore this section to its previous version" aria-label="Restore this section">↺</button></header><div class="gemboss-ei-tabs" role="tablist"><button type="button" role="tab" data-value="content" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Content</button><button type="button" role="tab" data-value="design" class="gemboss-ei-tab on" aria-selected="true" tabindex="0">Design</button><button type="button" role="tab" data-value="advanced" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Advanced</button></div><div class="gemboss-ei-body"><div class="gemboss-ei-pane"><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Layout<small class="gemboss-ei-gh-note">· all screens</small></button><div class="gemboss-ei-fld"><label>Content width</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Content width"><button type="button" data-value="full" aria-pressed="false" class="is-text">Full</button><button type="button" data-value="contained" aria-pressed="true" class="is-text active">Contained</button><button type="button" data-value="narrow" aria-pressed="false" class="is-text">Narrow</button></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Columns</label><button type="button" class="gemboss-ei-help" aria-label="About Columns" aria-describedby=":R18u:" aria-expanded="false">?</button></div><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Columns"><button type="button" data-value="2" disabled="" aria-pressed="false" class="is-text">2</button><button type="button" data-value="3" disabled="" aria-pressed="true" class="is-text active">3</button><button type="button" data-value="4" disabled="" aria-pressed="false" class="is-text">4</button></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R18u:">Disabled while a change is applied.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Spacing</button><div class="gemboss-ei-fld"><label>Padding</label><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding top" value="24"/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding bottom" value="24"/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding left" value=""/><span>L</span></div></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Margin</label><button type="button" class="gemboss-ei-help" aria-label="About Margin" aria-describedby=":R19e:" aria-expanded="false">?</button></div><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin top" value=""/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin bottom" value=""/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin left" value=""/><span>L</span></div></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19e:">Empty edges follow desktop.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Color</button><div class="gemboss-ei-fld"><label for="cat-bg">Background</label><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/><input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label for="cat-ov">Overlay</label><button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button></div><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch picks 6-digit hex colors only." aria-describedby=":Rb9u:" value="#000000"/><input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/><p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch picks 6-digit hex colors only.</p></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p></div><div class="gemboss-ei-fld"><label for="cat-op">Opacity<span class="gemboss-ei-rangeval" data-suffix="%">80%</span></label><input id="cat-op" type="range" class="gemboss-ei-range" min="0" max="100" step="1" value="80"/></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Media</button><div class="gemboss-ei-fld"><label for="cat-img">Image</label><div class="gemboss-ei-img"><div class="gemboss-ei-img-thumb" aria-hidden="true">—</div><div class="gemboss-ei-img-ctl"><input id="cat-img" class="gemboss-field gemboss-ei-inp" placeholder="Paste image URL…" value=""/><div class="gemboss-ei-img-actions"><button type="button" class="ui-btn" aria-expanded="false">Library</button><button type="button" class="ui-btn" data-gb-image-clear>Clear</button></div></div></div></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="closed" aria-expanded="false"><span class="gemboss-ei-chev" aria-hidden="true">▸</span>Motion</button><div class="gemboss-ei-fld"><label>Reveal</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Reveal"><button type="button" data-value="none" aria-pressed="true" class="is-text active">None</button><button type="button" data-value="fade" aria-pressed="false" class="is-text">Fade</button></div></div></div></div></div></aside></div></div><script src="../src/kit-plain.js"></script><script src="../src/editor-plain.js"></script><script>gembossUI.initEditorFrame()</script><script>gembossUI.initEditorPanel()</script><script src="../src/editor-layers-plain.js"></script><script>gembossUI.initEditorLayers()</script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-ec" style="width:360px;height:1040px">
|
|
322
|
+
<figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/editor.css"></head><body><div class="gemboss-ec" style="width:360px;height:1040px"><div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels"><button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button><button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button></div><div class="gemboss-ec-dock-body" style="padding:0"><aside class="gemboss-ei gemboss-ei--docked" role="region" aria-label="Settings — Hero"><header class="gemboss-ei-head"><span class="gemboss-ei-title">Hero<small>hero-banner.default.v1</small></span><button type="button" class="gemboss-ei-act" title="Duplicate section" aria-label="Duplicate section">⧉</button><button type="button" class="gemboss-ei-act" title="Restore this section to its previous version" aria-label="Restore this section">↺</button></header><div class="gemboss-ei-tabs" role="tablist"><button type="button" role="tab" data-value="content" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Content</button><button type="button" role="tab" data-value="design" class="gemboss-ei-tab on" aria-selected="true" tabindex="0">Design</button><button type="button" role="tab" data-value="advanced" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Advanced</button></div><div class="gemboss-ei-body"><div class="gemboss-ei-pane"><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Layout<small class="gemboss-ei-gh-note">· all screens</small></button><div class="gemboss-ei-fld"><label>Content width</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Content width"><button type="button" data-value="full" aria-pressed="false" class="is-text">Full</button><button type="button" data-value="contained" aria-pressed="true" class="is-text active">Contained</button><button type="button" data-value="narrow" aria-pressed="false" class="is-text">Narrow</button></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Columns</label><button type="button" class="gemboss-ei-help" aria-label="About Columns" aria-describedby=":R18u:" aria-expanded="false">?</button></div><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Columns"><button type="button" data-value="2" disabled="" aria-pressed="false" class="is-text">2</button><button type="button" data-value="3" disabled="" aria-pressed="true" class="is-text active">3</button><button type="button" data-value="4" disabled="" aria-pressed="false" class="is-text">4</button></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R18u:">Disabled while a change is applied.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Spacing</button><div class="gemboss-ei-fld"><label>Padding</label><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding top" value="24"/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding bottom" value="24"/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding left" value=""/><span>L</span></div></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Margin</label><button type="button" class="gemboss-ei-help" aria-label="About Margin" aria-describedby=":R19e:" aria-expanded="false">?</button></div><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin top" value=""/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin bottom" value=""/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin left" value=""/><span>L</span></div></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19e:">Empty edges follow desktop.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Color</button><div class="gemboss-ei-fld"><label for="cat-bg">Background</label><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/><input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/><input class="gemboss-field gemboss-ei-inp" data-alpha="" aria-label="Background opacity" inputMode="numeric" style="flex:0 0 64px" value="100%"/></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label for="cat-ov">Overlay</label><button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button></div><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name." aria-describedby=":Rb9u:" value="#000000"/><input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/><p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.</p></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p></div><div class="gemboss-ei-fld"><label for="cat-op">Opacity<span class="gemboss-ei-rangeval" data-suffix="%">80%</span></label><input id="cat-op" type="range" class="gemboss-ei-range" min="0" max="100" step="1" value="80"/></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Media</button><div class="gemboss-ei-fld"><label for="cat-img">Image</label><div class="gemboss-ei-img"><div class="gemboss-ei-img-thumb" aria-hidden="true">—</div><div class="gemboss-ei-img-ctl"><input id="cat-img" class="gemboss-field gemboss-ei-inp" placeholder="Paste image URL…" value=""/><div class="gemboss-ei-img-actions"><button type="button" class="ui-btn" aria-expanded="false">Library</button><button type="button" class="ui-btn" data-gb-image-clear>Clear</button></div></div></div></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="closed" aria-expanded="false"><span class="gemboss-ei-chev" aria-hidden="true">▸</span>Motion</button><div class="gemboss-ei-fld"><label>Reveal</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Reveal"><button type="button" data-value="none" aria-pressed="true" class="is-text active">None</button><button type="button" data-value="fade" aria-pressed="false" class="is-text">Fade</button></div></div></div></div></div></aside></div></div><script src="../src/kit-plain.js"></script><script src="../src/editor-plain.js"></script><script>gembossUI.initEditorFrame()</script><script>gembossUI.initEditorPanel()</script><script src="../src/editor-layers-plain.js"></script><script>gembossUI.initEditorLayers()</script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-ec" style="width:360px;height:1040px">
|
|
323
323
|
<div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels">
|
|
324
324
|
<button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button>
|
|
325
325
|
<button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button>
|
|
@@ -422,6 +422,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
422
422
|
<div class="gemboss-ei-color">
|
|
423
423
|
<input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/>
|
|
424
424
|
<input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/>
|
|
425
|
+
<input class="gemboss-field gemboss-ei-inp" data-alpha="" aria-label="Background opacity" inputMode="numeric" style="flex:0 0 64px" value="100%"/>
|
|
425
426
|
</div>
|
|
426
427
|
</div>
|
|
427
428
|
<div class="gemboss-ei-fld">
|
|
@@ -430,9 +431,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
430
431
|
<button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button>
|
|
431
432
|
</div>
|
|
432
433
|
<div class="gemboss-ei-color">
|
|
433
|
-
<input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch
|
|
434
|
+
<input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name." aria-describedby=":Rb9u:" value="#000000"/>
|
|
434
435
|
<input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/>
|
|
435
|
-
<p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch
|
|
436
|
+
<p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.</p>
|
|
436
437
|
</div>
|
|
437
438
|
<p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p>
|
|
438
439
|
</div>
|
|
@@ -475,7 +476,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
475
476
|
</aside>
|
|
476
477
|
</div>
|
|
477
478
|
</div></code></pre></details></figure>
|
|
478
|
-
<figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/editor.css"></head><body><div class="gemboss-ec" style="width:360px;height:1040px"><div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels"><button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button><button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button></div><div class="gemboss-ec-dock-body" style="padding:0"><aside class="gemboss-ei gemboss-ei--docked" role="region" aria-label="Settings — Hero"><header class="gemboss-ei-head"><span class="gemboss-ei-title">Hero<small>hero-banner.default.v1</small></span><button type="button" class="gemboss-ei-act" title="Duplicate section" aria-label="Duplicate section">⧉</button><button type="button" class="gemboss-ei-act" title="Restore this section to its previous version" aria-label="Restore this section">↺</button></header><div class="gemboss-ei-tabs" role="tablist"><button type="button" role="tab" data-value="content" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Content</button><button type="button" role="tab" data-value="design" class="gemboss-ei-tab on" aria-selected="true" tabindex="0">Design</button><button type="button" role="tab" data-value="advanced" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Advanced</button></div><div class="gemboss-ei-body"><div class="gemboss-ei-pane"><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Layout<small class="gemboss-ei-gh-note">· all screens</small></button><div class="gemboss-ei-fld"><label>Content width</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Content width"><button type="button" data-value="full" aria-pressed="false" class="is-text">Full</button><button type="button" data-value="contained" aria-pressed="true" class="is-text active">Contained</button><button type="button" data-value="narrow" aria-pressed="false" class="is-text">Narrow</button></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Columns</label><button type="button" class="gemboss-ei-help" aria-label="About Columns" aria-describedby=":R18u:" aria-expanded="false">?</button></div><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Columns"><button type="button" data-value="2" disabled="" aria-pressed="false" class="is-text">2</button><button type="button" data-value="3" disabled="" aria-pressed="true" class="is-text active">3</button><button type="button" data-value="4" disabled="" aria-pressed="false" class="is-text">4</button></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R18u:">Disabled while a change is applied.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Spacing</button><div class="gemboss-ei-fld"><label>Padding</label><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding top" value="24"/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding bottom" value="24"/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding left" value=""/><span>L</span></div></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Margin</label><button type="button" class="gemboss-ei-help" aria-label="About Margin" aria-describedby=":R19e:" aria-expanded="false">?</button></div><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin top" value=""/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin bottom" value=""/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin left" value=""/><span>L</span></div></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19e:">Empty edges follow desktop.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Color</button><div class="gemboss-ei-fld"><label for="cat-bg">Background</label><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/><input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label for="cat-ov">Overlay</label><button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button></div><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch picks 6-digit hex colors only." aria-describedby=":Rb9u:" value="#000000"/><input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/><p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch picks 6-digit hex colors only.</p></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p></div><div class="gemboss-ei-fld"><label for="cat-op">Opacity<span class="gemboss-ei-rangeval" data-suffix="%">80%</span></label><input id="cat-op" type="range" class="gemboss-ei-range" min="0" max="100" step="1" value="80"/></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Media</button><div class="gemboss-ei-fld"><label for="cat-img">Image</label><div class="gemboss-ei-img"><div class="gemboss-ei-img-thumb" aria-hidden="true">—</div><div class="gemboss-ei-img-ctl"><input id="cat-img" class="gemboss-field gemboss-ei-inp" placeholder="Paste image URL…" value=""/><div class="gemboss-ei-img-actions"><button type="button" class="ui-btn" aria-expanded="false">Library</button><button type="button" class="ui-btn" data-gb-image-clear>Clear</button></div></div></div></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="closed" aria-expanded="false"><span class="gemboss-ei-chev" aria-hidden="true">▸</span>Motion</button><div class="gemboss-ei-fld"><label>Reveal</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Reveal"><button type="button" data-value="none" aria-pressed="true" class="is-text active">None</button><button type="button" data-value="fade" aria-pressed="false" class="is-text">Fade</button></div></div></div></div></div></aside></div></div><script src="../src/kit-plain.js"></script><script src="../src/editor-plain.js"></script><script>gembossUI.initEditorFrame()</script><script>gembossUI.initEditorPanel()</script><script src="../src/editor-layers-plain.js"></script><script>gembossUI.initEditorLayers()</script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-ec" style="width:360px;height:1040px">
|
|
479
|
+
<figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/editor.css"></head><body><div class="gemboss-ec" style="width:360px;height:1040px"><div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels"><button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button><button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button></div><div class="gemboss-ec-dock-body" style="padding:0"><aside class="gemboss-ei gemboss-ei--docked" role="region" aria-label="Settings — Hero"><header class="gemboss-ei-head"><span class="gemboss-ei-title">Hero<small>hero-banner.default.v1</small></span><button type="button" class="gemboss-ei-act" title="Duplicate section" aria-label="Duplicate section">⧉</button><button type="button" class="gemboss-ei-act" title="Restore this section to its previous version" aria-label="Restore this section">↺</button></header><div class="gemboss-ei-tabs" role="tablist"><button type="button" role="tab" data-value="content" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Content</button><button type="button" role="tab" data-value="design" class="gemboss-ei-tab on" aria-selected="true" tabindex="0">Design</button><button type="button" role="tab" data-value="advanced" class="gemboss-ei-tab" aria-selected="false" tabindex="-1">Advanced</button></div><div class="gemboss-ei-body"><div class="gemboss-ei-pane"><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Layout<small class="gemboss-ei-gh-note">· all screens</small></button><div class="gemboss-ei-fld"><label>Content width</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Content width"><button type="button" data-value="full" aria-pressed="false" class="is-text">Full</button><button type="button" data-value="contained" aria-pressed="true" class="is-text active">Contained</button><button type="button" data-value="narrow" aria-pressed="false" class="is-text">Narrow</button></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Columns</label><button type="button" class="gemboss-ei-help" aria-label="About Columns" aria-describedby=":R18u:" aria-expanded="false">?</button></div><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Columns"><button type="button" data-value="2" disabled="" aria-pressed="false" class="is-text">2</button><button type="button" data-value="3" disabled="" aria-pressed="true" class="is-text active">3</button><button type="button" data-value="4" disabled="" aria-pressed="false" class="is-text">4</button></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R18u:">Disabled while a change is applied.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Spacing</button><div class="gemboss-ei-fld"><label>Padding</label><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding top" value="24"/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding bottom" value="24"/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Padding left" value=""/><span>L</span></div></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label>Margin</label><button type="button" class="gemboss-ei-help" aria-label="About Margin" aria-describedby=":R19e:" aria-expanded="false">?</button></div><div class="gemboss-ei-edgebox"><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin top" value=""/><span>T</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin right" value=""/><span>R</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="16" aria-label="Margin bottom" value=""/><span>B</span></div><div class="gemboss-ei-edge"><input class="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode="numeric" placeholder="0" aria-label="Margin left" value=""/><span>L</span></div></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19e:">Empty edges follow desktop.</p></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Color</button><div class="gemboss-ei-fld"><label for="cat-bg">Background</label><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/><input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/><input class="gemboss-field gemboss-ei-inp" data-alpha="" aria-label="Background opacity" inputMode="numeric" style="flex:0 0 64px" value="100%"/></div></div><div class="gemboss-ei-fld"><div class="gemboss-ei-lbl"><label for="cat-ov">Overlay</label><button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button></div><div class="gemboss-ei-color"><input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name." aria-describedby=":Rb9u:" value="#000000"/><input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/><p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.</p></div><p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p></div><div class="gemboss-ei-fld"><label for="cat-op">Opacity<span class="gemboss-ei-rangeval" data-suffix="%">80%</span></label><input id="cat-op" type="range" class="gemboss-ei-range" min="0" max="100" step="1" value="80"/></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="open" aria-expanded="true"><span class="gemboss-ei-chev" aria-hidden="true">▾</span>Media</button><div class="gemboss-ei-fld"><label for="cat-img">Image</label><div class="gemboss-ei-img"><div class="gemboss-ei-img-thumb" aria-hidden="true">—</div><div class="gemboss-ei-img-ctl"><input id="cat-img" class="gemboss-field gemboss-ei-inp" placeholder="Paste image URL…" value=""/><div class="gemboss-ei-img-actions"><button type="button" class="ui-btn" aria-expanded="false">Library</button><button type="button" class="ui-btn" data-gb-image-clear>Clear</button></div></div></div></div></div><div class="gemboss-ei-grp"><button type="button" class="gemboss-ei-gh" data-open="closed" aria-expanded="false"><span class="gemboss-ei-chev" aria-hidden="true">▸</span>Motion</button><div class="gemboss-ei-fld"><label>Reveal</label><div class="ui-seg ui-seg--fill gemboss-ei-seg" role="group" aria-label="Reveal"><button type="button" data-value="none" aria-pressed="true" class="is-text active">None</button><button type="button" data-value="fade" aria-pressed="false" class="is-text">Fade</button></div></div></div></div></div></aside></div></div><script src="../src/kit-plain.js"></script><script src="../src/editor-plain.js"></script><script>gembossUI.initEditorFrame()</script><script>gembossUI.initEditorPanel()</script><script src="../src/editor-layers-plain.js"></script><script>gembossUI.initEditorLayers()</script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-ec" style="width:360px;height:1040px">
|
|
479
480
|
<div class="gemboss-ec-tabs" role="tablist" aria-label="Editor panels">
|
|
480
481
|
<button type="button" role="tab" data-value="configure" class="gemboss-ec-tab" aria-selected="true">Settings</button>
|
|
481
482
|
<button type="button" role="tab" data-value="chat" class="gemboss-ec-tab" aria-selected="false">Chat</button>
|
|
@@ -578,6 +579,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
578
579
|
<div class="gemboss-ei-color">
|
|
579
580
|
<input type="color" class="gemboss-ei-swatch" aria-label="Background swatch" value="#f4efe6"/>
|
|
580
581
|
<input id="cat-bg" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="#f4efe6"/>
|
|
582
|
+
<input class="gemboss-field gemboss-ei-inp" data-alpha="" aria-label="Background opacity" inputMode="numeric" style="flex:0 0 64px" value="100%"/>
|
|
581
583
|
</div>
|
|
582
584
|
</div>
|
|
583
585
|
<div class="gemboss-ei-fld">
|
|
@@ -586,9 +588,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
|
|
|
586
588
|
<button type="button" class="gemboss-ei-help" aria-label="About Overlay" aria-describedby=":R19u:" aria-expanded="false">?</button>
|
|
587
589
|
</div>
|
|
588
590
|
<div class="gemboss-ei-color">
|
|
589
|
-
<input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch
|
|
591
|
+
<input type="color" class="gemboss-ei-swatch" aria-label="Overlay swatch" disabled="" title="Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name." aria-describedby=":Rb9u:" value="#000000"/>
|
|
590
592
|
<input id="cat-ov" class="gemboss-field gemboss-ei-inp" placeholder="Not set" value="linear-gradient(90deg,#000,#0000)"/>
|
|
591
|
-
<p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch
|
|
593
|
+
<p id=":Rb9u:" class="gemboss-ei-color-why">Kept as written: the swatch shows one color (hex, rgb, hsl or oklch), not a gradient or a name.</p>
|
|
592
594
|
</div>
|
|
593
595
|
<p class="gemboss-ei-hint gemboss-ei-help-text" id=":R19u:">A gradient: the swatch cannot show it, so it is off.</p>
|
|
594
596
|
</div>
|