@realiizlabs/admin 0.15.7 → 0.15.9
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/dist/git/index.cjs +4 -5
- package/dist/git/index.cjs.map +1 -1
- package/dist/git/index.d.cts +4 -0
- package/dist/git/index.d.ts +4 -0
- package/dist/git/index.js +4 -5
- package/dist/git/index.js.map +1 -1
- package/dist/studio/index.cjs +5 -6
- package/dist/studio/index.cjs.map +1 -1
- package/dist/studio/index.js +5 -6
- package/dist/studio/index.js.map +1 -1
- package/dist/studio-ui/index.cjs +20 -5
- package/dist/studio-ui/index.cjs.map +1 -1
- package/dist/studio-ui/index.d.cts +1 -1
- package/dist/studio-ui/index.d.ts +1 -1
- package/dist/studio-ui/index.js +20 -5
- package/dist/studio-ui/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -392,7 +392,7 @@ declare function copyFor(entry: Pick<ContentTypeEntry, "id" | "label" | "singula
|
|
|
392
392
|
};
|
|
393
393
|
|
|
394
394
|
/** Studio's page styles (lists, account tabs, drop zones) — injected once by StudioShellFrame. */
|
|
395
|
-
declare const STUDIO_CSS = "\n/*\n * /admin \u2014 overrides only. Layout, color and components come from\n * @realiizlabs/admin/shell (SHELL_CSS, injected by AdminShell). The Realiiz\n * palette is the package default, so this file just maps the shell's font\n * hooks onto the site's loaded fonts. To rebrand, redeclare tokens here:\n * .rz-admin { --signal: #0a58ca; }\n */\n.rz-admin {\n --rz-font: var(--font-inter), system-ui, sans-serif;\n --rz-font-display: var(--font-space-grotesk), system-ui, sans-serif;\n --rz-font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;\n}\n\n/* Posts table: one wide column for the post (title, slug beneath in small mono) and\n tight fixed columns for the known-width bits. Nothing wraps; the title and slug end in\n an ellipsis with the full text as tooltip. The title opens the live post; the outbound\n arrow sits inline after it and appears on hover (the shell's a:hover .rz-arrow motion). */\n.rz-admin .rz-table--posts { table-layout: fixed; width: 100%; }\n.rz-admin .rz-table--posts td, .rz-admin .rz-table--posts th { white-space: nowrap; overflow: hidden; }\n.rz-admin .rz-col-title { width: auto; }\n.rz-admin .rz-col-date { width: 7.5rem; }\n.rz-admin .rz-col-status { width: 11.5rem; }\n.rz-admin .rz-col-actions { width: 8.5rem; }\n.rz-admin .rz-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.rz-admin .rz-slug { font-family: var(--rz-font-mono); font-size: .78rem; margin-top: .2rem; }\n.rz-admin [data-slugs=\"off\"] .rz-slug { display: none; }\n.rz-admin .rz-toolbar { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }\n.rz-admin .rz-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; user-select: none; }\n.rz-admin .rz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.rz-admin .rz-switch__track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); transition: background .15s; }\n.rz-admin .rz-switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }\n.rz-admin .rz-switch input:checked + .rz-switch__track { background: var(--signal); }\n.rz-admin .rz-switch input:checked + .rz-switch__track .rz-switch__thumb { transform: translateX(12px); }\n.rz-admin .rz-switch input:focus-visible + .rz-switch__track { outline: 2px solid var(--signal); outline-offset: 2px; }\n.rz-admin .rz-switch:hover .rz-switch__label { color: var(--text-primary); }\n.rz-admin .rz-title-link { display: flex; align-items: center; gap: .35em; max-width: 100%; color: inherit; text-decoration: none; }\n.rz-admin .rz-title-link .rz-arrow { opacity: 0; }\n.rz-admin .rz-title-link:hover { color: var(--signal); }\n.rz-admin .rz-title-link:hover .rz-arrow { opacity: 1; }\n/* Phones: the four columns can't share the width, so each row becomes a small card \u2014\n the title on its own line (wrapping to two), the address under it, then date \u00B7 status \u00B7\n actions on one row. Same markup; only the display changes. */\n@media (max-width: 720px) {\n .rz-admin .rz-table--posts, .rz-admin .rz-table--posts tbody { display: block; }\n .rz-admin .rz-table--posts colgroup, .rz-admin .rz-table--posts thead { display: none; }\n .rz-admin .rz-table--posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .8rem .9rem; border-bottom: 1px solid var(--separator); }\n .rz-admin .rz-table--posts tr:last-child { border-bottom: 0; }\n .rz-admin .rz-table--posts td, .rz-admin .rz-table--posts td.rz-fit { display: block; width: auto; padding: 0; border: 0; white-space: nowrap; overflow: visible; }\n .rz-admin .rz-table--posts .rz-title-cell { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; white-space: normal; }\n .rz-admin .rz-table--posts .rz-title-cell .rz-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; color: var(--text-primary); }\n .rz-admin .rz-table--posts .rz-title-link { display: inline; }\n .rz-admin .rz-table--posts .rz-slug { font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; -webkit-line-clamp: 1; }\n .rz-admin [data-slugs=\"off\"] .rz-table--posts .rz-slug { display: none; }\n .rz-admin .rz-table--posts td.rz-fit { font-size: .85rem; }\n .rz-admin .rz-table--posts td.rz-fit:last-child { margin-left: auto; }\n}\n\n/* Dashboard card for a section that isn't built yet: the real card, faded, buttons disabled. */\n/* Account page (05b): tracker-style \u2014 H1, email, underlined tabs, stacked form cards. */\n.rz-admin .acct-h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; color: var(--text-primary); }\n.rz-admin .acct-email { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.25rem; }\n.rz-admin .acct-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }\n.rz-admin .acct-stack:has(.acct-team) { max-width: none; }\n.rz-admin .acct-card { display: flex; flex-direction: column; gap: .9rem; }\n.rz-admin .acct-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }\n.rz-admin .acct-blurb { font-size: .875rem; color: var(--text-secondary); margin: -.4rem 0 0; line-height: 1.5; }\n.rz-admin .acct-blurb--link { margin-top: .6rem; }\n.rz-admin .acct-blurb a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }\n.rz-admin .acct-blurb a:hover { color: var(--text-primary); }\n.rz-admin .acct-field { display: flex; flex-direction: column; gap: .35rem; }\n.rz-admin .acct-label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }\n.rz-admin .acct-hint { font-size: .78rem; color: var(--text-muted); }\n.rz-admin .acct-input { font: inherit; font-size: .9rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; min-height: 40px; width: 100%; }\n.rz-admin .acct-input:read-only { color: var(--text-secondary); background: var(--surface-2); }\n.rz-admin .acct-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-select { width: auto; padding-right: 2rem; }\n.rz-admin .acct-select--sm { min-height: 32px; padding: 4px 28px 4px 8px; font-size: .8rem; }\n.rz-admin .acct-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-ok { font-size: .85rem; color: var(--signal); }\n.rz-admin .acct-link { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-link:hover { color: var(--signal); }\n.rz-admin .acct-link--danger:hover { color: #c0392b; }\n.rz-admin .acct-link:disabled { opacity: .5; cursor: default; }\n.rz-admin .acct-team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-invite__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }\n.rz-admin .acct-invite__row .acct-input[type=\"email\"] { flex: 1 1 220px; width: auto; }\n.rz-admin .acct-person { display: flex; align-items: center; gap: .7rem; }\n.rz-admin .acct-person__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; overflow: hidden; flex-shrink: 0; }\n.rz-admin .acct-person__avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rz-admin .acct-person__text { display: flex; flex-direction: column; line-height: 1.25; }\n.rz-admin .acct-person__email { font-size: .78rem; }\n.rz-admin .acct-row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; min-height: 34px; }\n.rz-admin .acct-help-list { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); line-height: 1.7; }\n\n/* Sign-in: the password option under the magic-link form. */\n.rz-admin .pwsi-toggle { margin: 1.1rem 0 0; text-align: center; }\n.rz-admin .pwsi { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--separator); }\n\n/* Password boxes: eye toggle + the requirement checklist that lights up as each rule passes. */\n.rz-admin .acct-pw { position: relative; }\n.rz-admin .acct-pw .acct-input { padding-right: 2.6rem; }\n.rz-admin .acct-pw__eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; color: var(--text-muted); cursor: pointer; display: inline-flex; border-radius: 4px; }\n.rz-admin .acct-pw__eye:hover, .rz-admin .acct-pw__eye[aria-pressed=\"true\"] { color: var(--text-secondary); }\n.rz-admin .acct-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }\n.rz-admin .acct-rule { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-muted); transition: color .15s; }\n.rz-admin .acct-rule--met { color: var(--signal); }\n\n/* Picture uploader (avatar, logo, favicon): one grid everywhere \u2014 preview | buttons row, hint under the buttons. */\n.rz-admin .acct-pic { border: 1px dashed var(--border); border-radius: 8px; padding: 16px 18px; background: var(--surface-0); outline: none; transition: border-color .15s; }\n.rz-admin .acct-pic:focus-visible, .rz-admin .acct-pic--over { border-color: var(--signal); border-style: solid; }\n.rz-admin .acct-pic--busy { opacity: .7; }\n.rz-admin .acct-pic__file { display: none; }\n.rz-admin .acct-pic__empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-muted); }\n.rz-admin .acct-pic__fallback { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-3); color: var(--text-muted); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }\n.rz-admin .acct-pic__fallback--circle { border-radius: 50%; }\n.rz-admin .acct-pic__or { font-size: .8125rem; }\n.rz-admin .acct-pic__has { display: flex; align-items: flex-start; gap: 16px; }\n.rz-admin .acct-pic__thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); flex-shrink: 0; }\n.rz-admin .acct-pic__thumb--circle { border-radius: 50%; }\n.rz-admin .acct-pic__meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }\n.rz-admin .acct-pic__actions { display: flex; align-items: center; gap: 14px; }\n.rz-admin .acct-pic__remove { font: inherit; font-size: .8125rem; background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-pic__remove:hover { color: #c0392b; }\n.rz-admin .acct-pic__remove:disabled { cursor: default; opacity: .6; }\n.rz-admin .acct-pic__hint { margin: 10px 0 0; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }\n.rz-admin .acct-pic__has .acct-pic__hint { margin-top: 0; }\n.rz-admin .acct-pic__note { margin: 8px 0 0; }\n.rz-admin .acct-pic__error { margin: 8px 0 0; font-size: .8rem; color: #c0392b; }\n\n/* Branded dropdown (role pickers): a bordered button that opens the shell's menu, checkmark on the current choice. */\n.rz-admin .acct-dd { position: relative; display: inline-block; }\n.rz-admin .acct-dd__btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .85rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 0 .7rem; height: 34px; cursor: pointer; }\n.rz-admin .acct-dd__btn:hover { border-color: var(--text-muted); }\n.rz-admin .acct-dd__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-dd__btn:disabled { opacity: .6; cursor: default; }\n.rz-admin .acct-dd__menu { left: 0; right: auto; min-width: 15rem; padding: .3rem 0; }\n.rz-admin .acct-dd__item { align-items: flex-start; }\n.rz-admin .acct-dd__check { width: 1rem; flex-shrink: 0; color: var(--signal); font-weight: 700; }\n.rz-admin .acct-dd__text { display: flex; flex-direction: column; line-height: 1.3; }\n.rz-admin .acct-dd__hint { font-size: .74rem; color: var(--text-muted); }\n/* Team table: everything on one center line, and the role menu may overflow the table (the shell\n clips .rz-table for rounded corners, so round the header cells by hand instead). */\n.rz-admin .acct-team { overflow: visible; }\n.rz-admin .acct-team thead th:first-child { border-top-left-radius: 8px; }\n.rz-admin .acct-team thead th:last-child { border-top-right-radius: 8px; }\n.rz-admin .acct-team tbody tr:last-child td { border-bottom: 0; }\n.rz-admin .acct-team td { vertical-align: middle; }\n.rz-admin .acct-team td > * { vertical-align: middle; }\n.rz-admin .acct-team .rz-pill { position: relative; top: 0; }\n.rz-admin .acct-dd__menu { z-index: 60; }\n.rz-admin .acct-invite__row .acct-dd__btn { height: 40px; }\n\n.rz-admin .rz-term { position: relative; display: inline; }\n.rz-admin .rz-term__word { cursor: help; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }\n.rz-admin .rz-term__word:hover, .rz-admin .rz-term__word:focus-visible { text-decoration-color: var(--signal); outline: none; }\n.rz-admin .rz-term__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 272px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--text-primary); color: var(--surface-0); font-size: .8125rem; line-height: 1.4; font-weight: 400; box-shadow: 0 8px 24px rgba(14,23,38,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }\n.rz-admin .rz-term__tip--open { opacity: 1; }\n\n/* ---- Help center ---------------------------------------------------- */\n.rz-admin .rz-help__search { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }\n.rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }\n.rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }\n.rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }\n@media (max-width: 760px) { .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; } .rz-admin .rz-help__nav { display: flex; flex-wrap: wrap; gap: .25rem; } }\n.rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }\n.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; }\n.rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }\n.rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }\n.rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }\n.rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }\n.rz-admin .rz-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }\n.rz-admin .rz-help__card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--rz-radius); text-decoration: none; color: inherit; transition: border-color .15s; }\n.rz-admin .rz-help__card:hover { border-color: var(--signal); }\n.rz-admin .rz-help__meta { font-family: var(--rz-font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }\n.rz-admin .rz-help__title { font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-help__summary { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }\n.rz-admin .rz-help__crumb { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rz-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-decoration: none; margin: 0 0 1rem; }\n.rz-admin .rz-help__crumb:hover { color: var(--signal); }\n.rz-admin .rz-help__prose { line-height: 1.65; color: var(--text-primary); }\n.rz-admin .rz-help__prose > * + * { margin-top: .85rem; }\n.rz-admin .rz-help__prose h2 { font-family: var(--rz-font-display); font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; }\n.rz-admin .rz-help__prose h3 { font-size: .95rem; font-weight: 600; margin-top: 1.25rem; }\n.rz-admin .rz-help__prose p, .rz-admin .rz-help__prose li { color: var(--text-secondary); }\n.rz-admin .rz-help__prose strong { color: var(--text-primary); font-weight: 600; }\n.rz-admin .rz-help__prose ul, .rz-admin .rz-help__prose ol { padding-left: 1.35rem; }\n.rz-admin .rz-help__prose li + li { margin-top: .3rem; }\n.rz-admin .rz-help__prose code { font-family: var(--rz-font-mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05em .35em; }\n.rz-admin .rz-help__prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rz-radius); padding: .8rem 1rem; overflow-x: auto; }\n.rz-admin .rz-help__prose pre code { background: transparent; border: 0; padding: 0; font-size: .82rem; line-height: 1.55; }\n.rz-admin .rz-help__prose blockquote { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--signal); color: var(--text-secondary); }\n.rz-admin .rz-help__prose a { color: var(--signal); text-decoration: none; }\n.rz-admin .rz-help__prose a:hover { color: var(--text-primary); }\n.rz-admin .rz-help__prose .rz-table td { white-space: normal; color: var(--text-secondary); }\n.rz-admin .rz-help__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--separator); font-size: .875rem; }\n.rz-admin .rz-help__pager a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); text-decoration: none; }\n.rz-admin .rz-help__pager a:hover { color: var(--signal); }\n.rz-admin .rz-arrow--back { transform: none; }\n@media (prefers-reduced-motion: no-preference) { .rz-admin a:hover .rz-arrow--back { transform: translateX(-4px); } }\n\n/* ---- Studio update strip / Settings \u2192 Studio ---------------------------- */\n.rz-admin .rz-update { border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--signal) 5%, var(--surface-1)); padding: .75rem 1.1rem; }\n.rz-admin .rz-update--strip { margin: 0 0 1.5rem; }\n.rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }\n.rz-admin .rz-update__title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-update--line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem 1.1rem; font-size: .875rem; }\n.rz-admin .rz-update--line .rz-update__later { margin-left: auto; }\n.rz-admin .rz-update__row .rz-update__done { flex: 1; margin-top: .5rem; }\n.rz-admin .rz-update__row .rz-update__later { align-self: flex-end; margin-top: .5rem; }\n.rz-admin .rz-update__title::before { content: \"\"; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }\n.rz-admin .rz-update__link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--signal); cursor: pointer; text-decoration: none; }\n.rz-admin .rz-update__link:hover { color: var(--text-primary); }\n.rz-admin .rz-update__later { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }\n.rz-admin .rz-update__later:hover { color: var(--text-primary); }\n.rz-admin .rz-update__notes { margin: .6rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }\n.rz-admin .rz-update__problem { margin: .6rem 0 0; font-size: .875rem; color: var(--status-down); }\n.rz-admin .rz-update__done { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }\n";
|
|
395
|
+
declare const STUDIO_CSS = "\n/*\n * /admin \u2014 overrides only. Layout, color and components come from\n * @realiizlabs/admin/shell (SHELL_CSS, injected by AdminShell). The Realiiz\n * palette is the package default, so this file just maps the shell's font\n * hooks onto the site's loaded fonts. To rebrand, redeclare tokens here:\n * .rz-admin { --signal: #0a58ca; }\n */\n.rz-admin {\n --rz-font: var(--font-inter), system-ui, sans-serif;\n --rz-font-display: var(--font-space-grotesk), system-ui, sans-serif;\n --rz-font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;\n}\n\n/* Posts table: one wide column for the post (title, slug beneath in small mono) and\n tight fixed columns for the known-width bits. Nothing wraps; the title and slug end in\n an ellipsis with the full text as tooltip. The title opens the live post; the outbound\n arrow sits inline after it and appears on hover (the shell's a:hover .rz-arrow motion). */\n.rz-admin .rz-table--posts { table-layout: fixed; width: 100%; }\n.rz-admin .rz-table--posts td, .rz-admin .rz-table--posts th { white-space: nowrap; overflow: hidden; }\n.rz-admin .rz-col-title { width: auto; }\n.rz-admin .rz-col-date { width: 7.5rem; }\n.rz-admin .rz-col-status { width: 11.5rem; }\n.rz-admin .rz-col-actions { width: 8.5rem; }\n.rz-admin .rz-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.rz-admin .rz-slug { font-family: var(--rz-font-mono); font-size: .78rem; margin-top: .2rem; }\n.rz-admin [data-slugs=\"off\"] .rz-slug { display: none; }\n.rz-admin .rz-toolbar { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }\n.rz-admin .rz-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; user-select: none; }\n.rz-admin .rz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.rz-admin .rz-switch__track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); transition: background .15s; }\n.rz-admin .rz-switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }\n.rz-admin .rz-switch input:checked + .rz-switch__track { background: var(--signal); }\n.rz-admin .rz-switch input:checked + .rz-switch__track .rz-switch__thumb { transform: translateX(12px); }\n.rz-admin .rz-switch input:focus-visible + .rz-switch__track { outline: 2px solid var(--signal); outline-offset: 2px; }\n.rz-admin .rz-switch:hover .rz-switch__label { color: var(--text-primary); }\n.rz-admin .rz-title-link { display: flex; align-items: center; gap: .35em; max-width: 100%; color: inherit; text-decoration: none; }\n.rz-admin .rz-title-link .rz-arrow { opacity: 0; }\n.rz-admin .rz-title-link:hover { color: var(--signal); }\n.rz-admin .rz-title-link:hover .rz-arrow { opacity: 1; }\n/* Phones: the four columns can't share the width, so each row becomes a small card \u2014\n the title on its own line (wrapping to two), the address under it, then date \u00B7 status \u00B7\n actions on one row. Same markup; only the display changes. */\n@media (max-width: 720px) {\n .rz-admin .rz-table--posts, .rz-admin .rz-table--posts tbody { display: block; }\n .rz-admin .rz-table--posts colgroup, .rz-admin .rz-table--posts thead { display: none; }\n .rz-admin .rz-table--posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .8rem .9rem; border-bottom: 1px solid var(--separator); }\n .rz-admin .rz-table--posts tr:last-child { border-bottom: 0; }\n .rz-admin .rz-table--posts td, .rz-admin .rz-table--posts td.rz-fit { display: block; width: auto; padding: 0; border: 0; white-space: nowrap; overflow: visible; }\n .rz-admin .rz-table--posts .rz-title-cell { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; white-space: normal; }\n .rz-admin .rz-table--posts .rz-title-cell .rz-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; color: var(--text-primary); }\n .rz-admin .rz-table--posts .rz-title-link { display: inline; }\n .rz-admin .rz-table--posts .rz-slug { font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; -webkit-line-clamp: 1; }\n .rz-admin [data-slugs=\"off\"] .rz-table--posts .rz-slug { display: none; }\n .rz-admin .rz-table--posts td.rz-fit { font-size: .85rem; }\n .rz-admin .rz-table--posts td.rz-fit:last-child { margin-left: auto; }\n}\n\n/* Dashboard card for a section that isn't built yet: the real card, faded, buttons disabled. */\n/* Account page (05b): tracker-style \u2014 H1, email, underlined tabs, stacked form cards. */\n.rz-admin .acct-h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; color: var(--text-primary); }\n.rz-admin .acct-email { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.25rem; }\n.rz-admin .acct-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }\n.rz-admin .acct-stack:has(.acct-team) { max-width: none; }\n.rz-admin .acct-card { display: flex; flex-direction: column; gap: .9rem; }\n.rz-admin .acct-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }\n.rz-admin .acct-blurb { font-size: .875rem; color: var(--text-secondary); margin: -.4rem 0 0; line-height: 1.5; }\n.rz-admin .acct-blurb--link { margin-top: .6rem; }\n.rz-admin .acct-blurb a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }\n.rz-admin .acct-blurb a:hover { color: var(--text-primary); }\n.rz-admin .acct-field { display: flex; flex-direction: column; gap: .35rem; }\n.rz-admin .acct-label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }\n.rz-admin .acct-hint { font-size: .78rem; color: var(--text-muted); }\n.rz-admin .acct-input { font: inherit; font-size: .9rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; min-height: 40px; width: 100%; }\n.rz-admin .acct-input:read-only { color: var(--text-secondary); background: var(--surface-2); }\n.rz-admin .acct-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-select { width: auto; padding-right: 2rem; }\n.rz-admin .acct-select--sm { min-height: 32px; padding: 4px 28px 4px 8px; font-size: .8rem; }\n.rz-admin .acct-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-ok { font-size: .85rem; color: var(--signal); }\n.rz-admin .acct-link { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-link:hover { color: var(--signal); }\n.rz-admin .acct-link--danger:hover { color: #c0392b; }\n.rz-admin .acct-link:disabled { opacity: .5; cursor: default; }\n.rz-admin .acct-team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-invite__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }\n.rz-admin .acct-invite__row .acct-input[type=\"email\"] { flex: 1 1 220px; width: auto; }\n.rz-admin .acct-person { display: flex; align-items: center; gap: .7rem; }\n.rz-admin .acct-person__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; overflow: hidden; flex-shrink: 0; }\n.rz-admin .acct-person__avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rz-admin .acct-person__text { display: flex; flex-direction: column; line-height: 1.25; }\n.rz-admin .acct-person__email { font-size: .78rem; }\n.rz-admin .acct-row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; min-height: 34px; }\n.rz-admin .acct-help-list { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); line-height: 1.7; }\n\n/* Sign-in: the password option under the magic-link form. */\n.rz-admin .pwsi-toggle { margin: 1.1rem 0 0; text-align: center; }\n.rz-admin .pwsi { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--separator); }\n\n/* Password boxes: eye toggle + the requirement checklist that lights up as each rule passes. */\n.rz-admin .acct-pw { position: relative; }\n.rz-admin .acct-pw .acct-input { padding-right: 2.6rem; }\n.rz-admin .acct-pw__eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; color: var(--text-muted); cursor: pointer; display: inline-flex; border-radius: 4px; }\n.rz-admin .acct-pw__eye:hover, .rz-admin .acct-pw__eye[aria-pressed=\"true\"] { color: var(--text-secondary); }\n.rz-admin .acct-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }\n.rz-admin .acct-rule { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-muted); transition: color .15s; }\n.rz-admin .acct-rule--met { color: var(--signal); }\n\n/* Picture uploader (avatar, logo, favicon): one grid everywhere \u2014 preview | buttons row, hint under the buttons. */\n.rz-admin .acct-pic { border: 1px dashed var(--border); border-radius: 8px; padding: 16px 18px; background: var(--surface-0); outline: none; transition: border-color .15s; }\n.rz-admin .acct-pic:focus-visible, .rz-admin .acct-pic--over { border-color: var(--signal); border-style: solid; }\n.rz-admin .acct-pic--busy { opacity: .7; }\n.rz-admin .acct-pic__file { display: none; }\n.rz-admin .acct-pic__empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-muted); }\n.rz-admin .acct-pic__fallback { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-3); color: var(--text-muted); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }\n.rz-admin .acct-pic__fallback--circle { border-radius: 50%; }\n.rz-admin .acct-pic__or { font-size: .8125rem; }\n.rz-admin .acct-pic__has { display: flex; align-items: flex-start; gap: 16px; }\n.rz-admin .acct-pic__thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); flex-shrink: 0; }\n.rz-admin .acct-pic__thumb--circle { border-radius: 50%; }\n.rz-admin .acct-pic__meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }\n.rz-admin .acct-pic__actions { display: flex; align-items: center; gap: 14px; }\n.rz-admin .acct-pic__remove { font: inherit; font-size: .8125rem; background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-pic__remove:hover { color: #c0392b; }\n.rz-admin .acct-pic__remove:disabled { cursor: default; opacity: .6; }\n.rz-admin .acct-pic__hint { margin: 10px 0 0; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }\n.rz-admin .acct-pic__has .acct-pic__hint { margin-top: 0; }\n.rz-admin .acct-pic__note { margin: 8px 0 0; }\n.rz-admin .acct-pic__error { margin: 8px 0 0; font-size: .8rem; color: #c0392b; }\n\n/* Branded dropdown (role pickers): a bordered button that opens the shell's menu, checkmark on the current choice. */\n.rz-admin .acct-dd { position: relative; display: inline-block; }\n.rz-admin .acct-dd__btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .85rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 0 .7rem; height: 34px; cursor: pointer; }\n.rz-admin .acct-dd__btn:hover { border-color: var(--text-muted); }\n.rz-admin .acct-dd__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-dd__btn:disabled { opacity: .6; cursor: default; }\n.rz-admin .acct-dd__menu { left: 0; right: auto; min-width: 15rem; padding: .3rem 0; }\n.rz-admin .acct-dd__item { align-items: flex-start; }\n.rz-admin .acct-dd__check { width: 1rem; flex-shrink: 0; color: var(--signal); font-weight: 700; }\n.rz-admin .acct-dd__text { display: flex; flex-direction: column; line-height: 1.3; }\n.rz-admin .acct-dd__hint { font-size: .74rem; color: var(--text-muted); }\n/* Team table: everything on one center line, and the role menu may overflow the table (the shell\n clips .rz-table for rounded corners, so round the header cells by hand instead). */\n.rz-admin .acct-team { overflow: visible; }\n.rz-admin .acct-team thead th:first-child { border-top-left-radius: 8px; }\n.rz-admin .acct-team thead th:last-child { border-top-right-radius: 8px; }\n.rz-admin .acct-team tbody tr:last-child td { border-bottom: 0; }\n.rz-admin .acct-team td { vertical-align: middle; }\n.rz-admin .acct-team td > * { vertical-align: middle; }\n.rz-admin .acct-team .rz-pill { position: relative; top: 0; }\n.rz-admin .acct-dd__menu { z-index: 60; }\n.rz-admin .acct-invite__row .acct-dd__btn { height: 40px; }\n\n.rz-admin .rz-term { position: relative; display: inline; }\n.rz-admin .rz-term__word { cursor: help; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }\n.rz-admin .rz-term__word:hover, .rz-admin .rz-term__word:focus-visible { text-decoration-color: var(--signal); outline: none; }\n.rz-admin .rz-term__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 272px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--text-primary); color: var(--surface-0); font-size: .8125rem; line-height: 1.4; font-weight: 400; box-shadow: 0 8px 24px rgba(14,23,38,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }\n.rz-admin .rz-term__tip--open { opacity: 1; }\n\n/* ---- Help center ---------------------------------------------------- */\n.rz-admin .rz-help__search { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }\n.rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }\n.rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }\n.rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }\n.rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }\n.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; white-space: nowrap; }\n.rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }\n/* Phones: sections become one row of chips that scrolls sideways above the content (must come\n after the desktop rules above \u2014 same specificity, last one wins). */\n@media (max-width: 760px) {\n .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; }\n .rz-admin .rz-help__nav { position: static; flex-direction: row; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: .1rem 14px .4rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }\n .rz-admin .rz-help__nav::-webkit-scrollbar { display: none; }\n .rz-admin .rz-help__navitem { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; background: var(--surface-1); }\n .rz-admin .rz-help__navitem--active { border-color: var(--signal); }\n}\n.rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }\n.rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }\n.rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }\n.rz-admin .rz-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }\n.rz-admin .rz-help__card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--rz-radius); text-decoration: none; color: inherit; transition: border-color .15s; }\n.rz-admin .rz-help__card:hover { border-color: var(--signal); }\n.rz-admin .rz-help__meta { font-family: var(--rz-font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }\n.rz-admin .rz-help__title { font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-help__summary { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }\n.rz-admin .rz-help__crumb { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rz-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-decoration: none; margin: 0 0 1rem; }\n.rz-admin .rz-help__crumb:hover { color: var(--signal); }\n.rz-admin .rz-help__prose { line-height: 1.65; color: var(--text-primary); }\n.rz-admin .rz-help__prose > * + * { margin-top: .85rem; }\n.rz-admin .rz-help__prose h2 { font-family: var(--rz-font-display); font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; }\n.rz-admin .rz-help__prose h3 { font-size: .95rem; font-weight: 600; margin-top: 1.25rem; }\n.rz-admin .rz-help__prose p, .rz-admin .rz-help__prose li { color: var(--text-secondary); }\n.rz-admin .rz-help__prose strong { color: var(--text-primary); font-weight: 600; }\n.rz-admin .rz-help__prose ul, .rz-admin .rz-help__prose ol { padding-left: 1.35rem; }\n.rz-admin .rz-help__prose li + li { margin-top: .3rem; }\n.rz-admin .rz-help__prose code { font-family: var(--rz-font-mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05em .35em; }\n.rz-admin .rz-help__prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rz-radius); padding: .8rem 1rem; overflow-x: auto; }\n.rz-admin .rz-help__prose pre code { background: transparent; border: 0; padding: 0; font-size: .82rem; line-height: 1.55; }\n.rz-admin .rz-help__prose blockquote { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--signal); color: var(--text-secondary); }\n.rz-admin .rz-help__prose a { color: var(--signal); text-decoration: none; }\n.rz-admin .rz-help__prose a:hover { color: var(--text-primary); }\n.rz-admin .rz-help__prose .rz-table td { white-space: normal; color: var(--text-secondary); }\n.rz-admin .rz-help__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--separator); font-size: .875rem; }\n.rz-admin .rz-help__pager a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); text-decoration: none; }\n.rz-admin .rz-help__pager a:hover { color: var(--signal); }\n.rz-admin .rz-arrow--back { transform: none; }\n@media (prefers-reduced-motion: no-preference) { .rz-admin a:hover .rz-arrow--back { transform: translateX(-4px); } }\n\n/* ---- Studio update strip / Settings \u2192 Studio ---------------------------- */\n.rz-admin .rz-update { border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--signal) 5%, var(--surface-1)); padding: .75rem 1.1rem; }\n.rz-admin .rz-update--strip { margin: 0 0 1.5rem; }\n.rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }\n.rz-admin .rz-update__title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-update--line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem 1.1rem; font-size: .875rem; }\n.rz-admin .rz-update--line .rz-update__later { margin-left: auto; }\n.rz-admin .rz-update__row .rz-update__done { flex: 1; margin-top: .5rem; }\n.rz-admin .rz-update__row .rz-update__later { align-self: flex-end; margin-top: .5rem; }\n.rz-admin .rz-update__title::before { content: \"\"; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }\n.rz-admin .rz-update__link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--signal); cursor: pointer; text-decoration: none; }\n.rz-admin .rz-update__link:hover { color: var(--text-primary); }\n.rz-admin .rz-update__later { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }\n.rz-admin .rz-update__later:hover { color: var(--text-primary); }\n.rz-admin .rz-update__notes { margin: .6rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }\n.rz-admin .rz-update__problem { margin: .6rem 0 0; font-size: .875rem; color: var(--status-down); }\n.rz-admin .rz-update__done { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }\n";
|
|
396
396
|
|
|
397
397
|
/**
|
|
398
398
|
* Plain-English facts about how Studio works — the text a site's help
|
|
@@ -392,7 +392,7 @@ declare function copyFor(entry: Pick<ContentTypeEntry, "id" | "label" | "singula
|
|
|
392
392
|
};
|
|
393
393
|
|
|
394
394
|
/** Studio's page styles (lists, account tabs, drop zones) — injected once by StudioShellFrame. */
|
|
395
|
-
declare const STUDIO_CSS = "\n/*\n * /admin \u2014 overrides only. Layout, color and components come from\n * @realiizlabs/admin/shell (SHELL_CSS, injected by AdminShell). The Realiiz\n * palette is the package default, so this file just maps the shell's font\n * hooks onto the site's loaded fonts. To rebrand, redeclare tokens here:\n * .rz-admin { --signal: #0a58ca; }\n */\n.rz-admin {\n --rz-font: var(--font-inter), system-ui, sans-serif;\n --rz-font-display: var(--font-space-grotesk), system-ui, sans-serif;\n --rz-font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;\n}\n\n/* Posts table: one wide column for the post (title, slug beneath in small mono) and\n tight fixed columns for the known-width bits. Nothing wraps; the title and slug end in\n an ellipsis with the full text as tooltip. The title opens the live post; the outbound\n arrow sits inline after it and appears on hover (the shell's a:hover .rz-arrow motion). */\n.rz-admin .rz-table--posts { table-layout: fixed; width: 100%; }\n.rz-admin .rz-table--posts td, .rz-admin .rz-table--posts th { white-space: nowrap; overflow: hidden; }\n.rz-admin .rz-col-title { width: auto; }\n.rz-admin .rz-col-date { width: 7.5rem; }\n.rz-admin .rz-col-status { width: 11.5rem; }\n.rz-admin .rz-col-actions { width: 8.5rem; }\n.rz-admin .rz-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.rz-admin .rz-slug { font-family: var(--rz-font-mono); font-size: .78rem; margin-top: .2rem; }\n.rz-admin [data-slugs=\"off\"] .rz-slug { display: none; }\n.rz-admin .rz-toolbar { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }\n.rz-admin .rz-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; user-select: none; }\n.rz-admin .rz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.rz-admin .rz-switch__track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); transition: background .15s; }\n.rz-admin .rz-switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }\n.rz-admin .rz-switch input:checked + .rz-switch__track { background: var(--signal); }\n.rz-admin .rz-switch input:checked + .rz-switch__track .rz-switch__thumb { transform: translateX(12px); }\n.rz-admin .rz-switch input:focus-visible + .rz-switch__track { outline: 2px solid var(--signal); outline-offset: 2px; }\n.rz-admin .rz-switch:hover .rz-switch__label { color: var(--text-primary); }\n.rz-admin .rz-title-link { display: flex; align-items: center; gap: .35em; max-width: 100%; color: inherit; text-decoration: none; }\n.rz-admin .rz-title-link .rz-arrow { opacity: 0; }\n.rz-admin .rz-title-link:hover { color: var(--signal); }\n.rz-admin .rz-title-link:hover .rz-arrow { opacity: 1; }\n/* Phones: the four columns can't share the width, so each row becomes a small card \u2014\n the title on its own line (wrapping to two), the address under it, then date \u00B7 status \u00B7\n actions on one row. Same markup; only the display changes. */\n@media (max-width: 720px) {\n .rz-admin .rz-table--posts, .rz-admin .rz-table--posts tbody { display: block; }\n .rz-admin .rz-table--posts colgroup, .rz-admin .rz-table--posts thead { display: none; }\n .rz-admin .rz-table--posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .8rem .9rem; border-bottom: 1px solid var(--separator); }\n .rz-admin .rz-table--posts tr:last-child { border-bottom: 0; }\n .rz-admin .rz-table--posts td, .rz-admin .rz-table--posts td.rz-fit { display: block; width: auto; padding: 0; border: 0; white-space: nowrap; overflow: visible; }\n .rz-admin .rz-table--posts .rz-title-cell { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; white-space: normal; }\n .rz-admin .rz-table--posts .rz-title-cell .rz-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; color: var(--text-primary); }\n .rz-admin .rz-table--posts .rz-title-link { display: inline; }\n .rz-admin .rz-table--posts .rz-slug { font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; -webkit-line-clamp: 1; }\n .rz-admin [data-slugs=\"off\"] .rz-table--posts .rz-slug { display: none; }\n .rz-admin .rz-table--posts td.rz-fit { font-size: .85rem; }\n .rz-admin .rz-table--posts td.rz-fit:last-child { margin-left: auto; }\n}\n\n/* Dashboard card for a section that isn't built yet: the real card, faded, buttons disabled. */\n/* Account page (05b): tracker-style \u2014 H1, email, underlined tabs, stacked form cards. */\n.rz-admin .acct-h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; color: var(--text-primary); }\n.rz-admin .acct-email { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.25rem; }\n.rz-admin .acct-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }\n.rz-admin .acct-stack:has(.acct-team) { max-width: none; }\n.rz-admin .acct-card { display: flex; flex-direction: column; gap: .9rem; }\n.rz-admin .acct-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }\n.rz-admin .acct-blurb { font-size: .875rem; color: var(--text-secondary); margin: -.4rem 0 0; line-height: 1.5; }\n.rz-admin .acct-blurb--link { margin-top: .6rem; }\n.rz-admin .acct-blurb a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }\n.rz-admin .acct-blurb a:hover { color: var(--text-primary); }\n.rz-admin .acct-field { display: flex; flex-direction: column; gap: .35rem; }\n.rz-admin .acct-label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }\n.rz-admin .acct-hint { font-size: .78rem; color: var(--text-muted); }\n.rz-admin .acct-input { font: inherit; font-size: .9rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; min-height: 40px; width: 100%; }\n.rz-admin .acct-input:read-only { color: var(--text-secondary); background: var(--surface-2); }\n.rz-admin .acct-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-select { width: auto; padding-right: 2rem; }\n.rz-admin .acct-select--sm { min-height: 32px; padding: 4px 28px 4px 8px; font-size: .8rem; }\n.rz-admin .acct-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-ok { font-size: .85rem; color: var(--signal); }\n.rz-admin .acct-link { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-link:hover { color: var(--signal); }\n.rz-admin .acct-link--danger:hover { color: #c0392b; }\n.rz-admin .acct-link:disabled { opacity: .5; cursor: default; }\n.rz-admin .acct-team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-invite__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }\n.rz-admin .acct-invite__row .acct-input[type=\"email\"] { flex: 1 1 220px; width: auto; }\n.rz-admin .acct-person { display: flex; align-items: center; gap: .7rem; }\n.rz-admin .acct-person__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; overflow: hidden; flex-shrink: 0; }\n.rz-admin .acct-person__avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rz-admin .acct-person__text { display: flex; flex-direction: column; line-height: 1.25; }\n.rz-admin .acct-person__email { font-size: .78rem; }\n.rz-admin .acct-row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; min-height: 34px; }\n.rz-admin .acct-help-list { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); line-height: 1.7; }\n\n/* Sign-in: the password option under the magic-link form. */\n.rz-admin .pwsi-toggle { margin: 1.1rem 0 0; text-align: center; }\n.rz-admin .pwsi { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--separator); }\n\n/* Password boxes: eye toggle + the requirement checklist that lights up as each rule passes. */\n.rz-admin .acct-pw { position: relative; }\n.rz-admin .acct-pw .acct-input { padding-right: 2.6rem; }\n.rz-admin .acct-pw__eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; color: var(--text-muted); cursor: pointer; display: inline-flex; border-radius: 4px; }\n.rz-admin .acct-pw__eye:hover, .rz-admin .acct-pw__eye[aria-pressed=\"true\"] { color: var(--text-secondary); }\n.rz-admin .acct-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }\n.rz-admin .acct-rule { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-muted); transition: color .15s; }\n.rz-admin .acct-rule--met { color: var(--signal); }\n\n/* Picture uploader (avatar, logo, favicon): one grid everywhere \u2014 preview | buttons row, hint under the buttons. */\n.rz-admin .acct-pic { border: 1px dashed var(--border); border-radius: 8px; padding: 16px 18px; background: var(--surface-0); outline: none; transition: border-color .15s; }\n.rz-admin .acct-pic:focus-visible, .rz-admin .acct-pic--over { border-color: var(--signal); border-style: solid; }\n.rz-admin .acct-pic--busy { opacity: .7; }\n.rz-admin .acct-pic__file { display: none; }\n.rz-admin .acct-pic__empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-muted); }\n.rz-admin .acct-pic__fallback { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-3); color: var(--text-muted); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }\n.rz-admin .acct-pic__fallback--circle { border-radius: 50%; }\n.rz-admin .acct-pic__or { font-size: .8125rem; }\n.rz-admin .acct-pic__has { display: flex; align-items: flex-start; gap: 16px; }\n.rz-admin .acct-pic__thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); flex-shrink: 0; }\n.rz-admin .acct-pic__thumb--circle { border-radius: 50%; }\n.rz-admin .acct-pic__meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }\n.rz-admin .acct-pic__actions { display: flex; align-items: center; gap: 14px; }\n.rz-admin .acct-pic__remove { font: inherit; font-size: .8125rem; background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-pic__remove:hover { color: #c0392b; }\n.rz-admin .acct-pic__remove:disabled { cursor: default; opacity: .6; }\n.rz-admin .acct-pic__hint { margin: 10px 0 0; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }\n.rz-admin .acct-pic__has .acct-pic__hint { margin-top: 0; }\n.rz-admin .acct-pic__note { margin: 8px 0 0; }\n.rz-admin .acct-pic__error { margin: 8px 0 0; font-size: .8rem; color: #c0392b; }\n\n/* Branded dropdown (role pickers): a bordered button that opens the shell's menu, checkmark on the current choice. */\n.rz-admin .acct-dd { position: relative; display: inline-block; }\n.rz-admin .acct-dd__btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .85rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 0 .7rem; height: 34px; cursor: pointer; }\n.rz-admin .acct-dd__btn:hover { border-color: var(--text-muted); }\n.rz-admin .acct-dd__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-dd__btn:disabled { opacity: .6; cursor: default; }\n.rz-admin .acct-dd__menu { left: 0; right: auto; min-width: 15rem; padding: .3rem 0; }\n.rz-admin .acct-dd__item { align-items: flex-start; }\n.rz-admin .acct-dd__check { width: 1rem; flex-shrink: 0; color: var(--signal); font-weight: 700; }\n.rz-admin .acct-dd__text { display: flex; flex-direction: column; line-height: 1.3; }\n.rz-admin .acct-dd__hint { font-size: .74rem; color: var(--text-muted); }\n/* Team table: everything on one center line, and the role menu may overflow the table (the shell\n clips .rz-table for rounded corners, so round the header cells by hand instead). */\n.rz-admin .acct-team { overflow: visible; }\n.rz-admin .acct-team thead th:first-child { border-top-left-radius: 8px; }\n.rz-admin .acct-team thead th:last-child { border-top-right-radius: 8px; }\n.rz-admin .acct-team tbody tr:last-child td { border-bottom: 0; }\n.rz-admin .acct-team td { vertical-align: middle; }\n.rz-admin .acct-team td > * { vertical-align: middle; }\n.rz-admin .acct-team .rz-pill { position: relative; top: 0; }\n.rz-admin .acct-dd__menu { z-index: 60; }\n.rz-admin .acct-invite__row .acct-dd__btn { height: 40px; }\n\n.rz-admin .rz-term { position: relative; display: inline; }\n.rz-admin .rz-term__word { cursor: help; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }\n.rz-admin .rz-term__word:hover, .rz-admin .rz-term__word:focus-visible { text-decoration-color: var(--signal); outline: none; }\n.rz-admin .rz-term__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 272px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--text-primary); color: var(--surface-0); font-size: .8125rem; line-height: 1.4; font-weight: 400; box-shadow: 0 8px 24px rgba(14,23,38,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }\n.rz-admin .rz-term__tip--open { opacity: 1; }\n\n/* ---- Help center ---------------------------------------------------- */\n.rz-admin .rz-help__search { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }\n.rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }\n.rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }\n.rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }\n@media (max-width: 760px) { .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; } .rz-admin .rz-help__nav { display: flex; flex-wrap: wrap; gap: .25rem; } }\n.rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }\n.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; }\n.rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }\n.rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }\n.rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }\n.rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }\n.rz-admin .rz-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }\n.rz-admin .rz-help__card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--rz-radius); text-decoration: none; color: inherit; transition: border-color .15s; }\n.rz-admin .rz-help__card:hover { border-color: var(--signal); }\n.rz-admin .rz-help__meta { font-family: var(--rz-font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }\n.rz-admin .rz-help__title { font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-help__summary { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }\n.rz-admin .rz-help__crumb { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rz-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-decoration: none; margin: 0 0 1rem; }\n.rz-admin .rz-help__crumb:hover { color: var(--signal); }\n.rz-admin .rz-help__prose { line-height: 1.65; color: var(--text-primary); }\n.rz-admin .rz-help__prose > * + * { margin-top: .85rem; }\n.rz-admin .rz-help__prose h2 { font-family: var(--rz-font-display); font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; }\n.rz-admin .rz-help__prose h3 { font-size: .95rem; font-weight: 600; margin-top: 1.25rem; }\n.rz-admin .rz-help__prose p, .rz-admin .rz-help__prose li { color: var(--text-secondary); }\n.rz-admin .rz-help__prose strong { color: var(--text-primary); font-weight: 600; }\n.rz-admin .rz-help__prose ul, .rz-admin .rz-help__prose ol { padding-left: 1.35rem; }\n.rz-admin .rz-help__prose li + li { margin-top: .3rem; }\n.rz-admin .rz-help__prose code { font-family: var(--rz-font-mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05em .35em; }\n.rz-admin .rz-help__prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rz-radius); padding: .8rem 1rem; overflow-x: auto; }\n.rz-admin .rz-help__prose pre code { background: transparent; border: 0; padding: 0; font-size: .82rem; line-height: 1.55; }\n.rz-admin .rz-help__prose blockquote { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--signal); color: var(--text-secondary); }\n.rz-admin .rz-help__prose a { color: var(--signal); text-decoration: none; }\n.rz-admin .rz-help__prose a:hover { color: var(--text-primary); }\n.rz-admin .rz-help__prose .rz-table td { white-space: normal; color: var(--text-secondary); }\n.rz-admin .rz-help__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--separator); font-size: .875rem; }\n.rz-admin .rz-help__pager a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); text-decoration: none; }\n.rz-admin .rz-help__pager a:hover { color: var(--signal); }\n.rz-admin .rz-arrow--back { transform: none; }\n@media (prefers-reduced-motion: no-preference) { .rz-admin a:hover .rz-arrow--back { transform: translateX(-4px); } }\n\n/* ---- Studio update strip / Settings \u2192 Studio ---------------------------- */\n.rz-admin .rz-update { border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--signal) 5%, var(--surface-1)); padding: .75rem 1.1rem; }\n.rz-admin .rz-update--strip { margin: 0 0 1.5rem; }\n.rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }\n.rz-admin .rz-update__title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-update--line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem 1.1rem; font-size: .875rem; }\n.rz-admin .rz-update--line .rz-update__later { margin-left: auto; }\n.rz-admin .rz-update__row .rz-update__done { flex: 1; margin-top: .5rem; }\n.rz-admin .rz-update__row .rz-update__later { align-self: flex-end; margin-top: .5rem; }\n.rz-admin .rz-update__title::before { content: \"\"; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }\n.rz-admin .rz-update__link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--signal); cursor: pointer; text-decoration: none; }\n.rz-admin .rz-update__link:hover { color: var(--text-primary); }\n.rz-admin .rz-update__later { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }\n.rz-admin .rz-update__later:hover { color: var(--text-primary); }\n.rz-admin .rz-update__notes { margin: .6rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }\n.rz-admin .rz-update__problem { margin: .6rem 0 0; font-size: .875rem; color: var(--status-down); }\n.rz-admin .rz-update__done { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }\n";
|
|
395
|
+
declare const STUDIO_CSS = "\n/*\n * /admin \u2014 overrides only. Layout, color and components come from\n * @realiizlabs/admin/shell (SHELL_CSS, injected by AdminShell). The Realiiz\n * palette is the package default, so this file just maps the shell's font\n * hooks onto the site's loaded fonts. To rebrand, redeclare tokens here:\n * .rz-admin { --signal: #0a58ca; }\n */\n.rz-admin {\n --rz-font: var(--font-inter), system-ui, sans-serif;\n --rz-font-display: var(--font-space-grotesk), system-ui, sans-serif;\n --rz-font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;\n}\n\n/* Posts table: one wide column for the post (title, slug beneath in small mono) and\n tight fixed columns for the known-width bits. Nothing wraps; the title and slug end in\n an ellipsis with the full text as tooltip. The title opens the live post; the outbound\n arrow sits inline after it and appears on hover (the shell's a:hover .rz-arrow motion). */\n.rz-admin .rz-table--posts { table-layout: fixed; width: 100%; }\n.rz-admin .rz-table--posts td, .rz-admin .rz-table--posts th { white-space: nowrap; overflow: hidden; }\n.rz-admin .rz-col-title { width: auto; }\n.rz-admin .rz-col-date { width: 7.5rem; }\n.rz-admin .rz-col-status { width: 11.5rem; }\n.rz-admin .rz-col-actions { width: 8.5rem; }\n.rz-admin .rz-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.rz-admin .rz-slug { font-family: var(--rz-font-mono); font-size: .78rem; margin-top: .2rem; }\n.rz-admin [data-slugs=\"off\"] .rz-slug { display: none; }\n.rz-admin .rz-toolbar { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }\n.rz-admin .rz-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; user-select: none; }\n.rz-admin .rz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.rz-admin .rz-switch__track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); transition: background .15s; }\n.rz-admin .rz-switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }\n.rz-admin .rz-switch input:checked + .rz-switch__track { background: var(--signal); }\n.rz-admin .rz-switch input:checked + .rz-switch__track .rz-switch__thumb { transform: translateX(12px); }\n.rz-admin .rz-switch input:focus-visible + .rz-switch__track { outline: 2px solid var(--signal); outline-offset: 2px; }\n.rz-admin .rz-switch:hover .rz-switch__label { color: var(--text-primary); }\n.rz-admin .rz-title-link { display: flex; align-items: center; gap: .35em; max-width: 100%; color: inherit; text-decoration: none; }\n.rz-admin .rz-title-link .rz-arrow { opacity: 0; }\n.rz-admin .rz-title-link:hover { color: var(--signal); }\n.rz-admin .rz-title-link:hover .rz-arrow { opacity: 1; }\n/* Phones: the four columns can't share the width, so each row becomes a small card \u2014\n the title on its own line (wrapping to two), the address under it, then date \u00B7 status \u00B7\n actions on one row. Same markup; only the display changes. */\n@media (max-width: 720px) {\n .rz-admin .rz-table--posts, .rz-admin .rz-table--posts tbody { display: block; }\n .rz-admin .rz-table--posts colgroup, .rz-admin .rz-table--posts thead { display: none; }\n .rz-admin .rz-table--posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .8rem .9rem; border-bottom: 1px solid var(--separator); }\n .rz-admin .rz-table--posts tr:last-child { border-bottom: 0; }\n .rz-admin .rz-table--posts td, .rz-admin .rz-table--posts td.rz-fit { display: block; width: auto; padding: 0; border: 0; white-space: nowrap; overflow: visible; }\n .rz-admin .rz-table--posts .rz-title-cell { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; white-space: normal; }\n .rz-admin .rz-table--posts .rz-title-cell .rz-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; color: var(--text-primary); }\n .rz-admin .rz-table--posts .rz-title-link { display: inline; }\n .rz-admin .rz-table--posts .rz-slug { font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; -webkit-line-clamp: 1; }\n .rz-admin [data-slugs=\"off\"] .rz-table--posts .rz-slug { display: none; }\n .rz-admin .rz-table--posts td.rz-fit { font-size: .85rem; }\n .rz-admin .rz-table--posts td.rz-fit:last-child { margin-left: auto; }\n}\n\n/* Dashboard card for a section that isn't built yet: the real card, faded, buttons disabled. */\n/* Account page (05b): tracker-style \u2014 H1, email, underlined tabs, stacked form cards. */\n.rz-admin .acct-h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; color: var(--text-primary); }\n.rz-admin .acct-email { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.25rem; }\n.rz-admin .acct-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }\n.rz-admin .acct-stack:has(.acct-team) { max-width: none; }\n.rz-admin .acct-card { display: flex; flex-direction: column; gap: .9rem; }\n.rz-admin .acct-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }\n.rz-admin .acct-blurb { font-size: .875rem; color: var(--text-secondary); margin: -.4rem 0 0; line-height: 1.5; }\n.rz-admin .acct-blurb--link { margin-top: .6rem; }\n.rz-admin .acct-blurb a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }\n.rz-admin .acct-blurb a:hover { color: var(--text-primary); }\n.rz-admin .acct-field { display: flex; flex-direction: column; gap: .35rem; }\n.rz-admin .acct-label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }\n.rz-admin .acct-hint { font-size: .78rem; color: var(--text-muted); }\n.rz-admin .acct-input { font: inherit; font-size: .9rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; min-height: 40px; width: 100%; }\n.rz-admin .acct-input:read-only { color: var(--text-secondary); background: var(--surface-2); }\n.rz-admin .acct-input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-select { width: auto; padding-right: 2rem; }\n.rz-admin .acct-select--sm { min-height: 32px; padding: 4px 28px 4px 8px; font-size: .8rem; }\n.rz-admin .acct-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-ok { font-size: .85rem; color: var(--signal); }\n.rz-admin .acct-link { font: inherit; font-size: .82rem; background: none; border: 0; padding: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-link:hover { color: var(--signal); }\n.rz-admin .acct-link--danger:hover { color: #c0392b; }\n.rz-admin .acct-link:disabled { opacity: .5; cursor: default; }\n.rz-admin .acct-team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }\n.rz-admin .acct-invite__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }\n.rz-admin .acct-invite__row .acct-input[type=\"email\"] { flex: 1 1 220px; width: auto; }\n.rz-admin .acct-person { display: flex; align-items: center; gap: .7rem; }\n.rz-admin .acct-person__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; overflow: hidden; flex-shrink: 0; }\n.rz-admin .acct-person__avatar img { width: 100%; height: 100%; object-fit: cover; }\n.rz-admin .acct-person__text { display: flex; flex-direction: column; line-height: 1.25; }\n.rz-admin .acct-person__email { font-size: .78rem; }\n.rz-admin .acct-row-actions { display: flex; gap: .8rem; align-items: center; white-space: nowrap; min-height: 34px; }\n.rz-admin .acct-help-list { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); line-height: 1.7; }\n\n/* Sign-in: the password option under the magic-link form. */\n.rz-admin .pwsi-toggle { margin: 1.1rem 0 0; text-align: center; }\n.rz-admin .pwsi { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--separator); }\n\n/* Password boxes: eye toggle + the requirement checklist that lights up as each rule passes. */\n.rz-admin .acct-pw { position: relative; }\n.rz-admin .acct-pw .acct-input { padding-right: 2.6rem; }\n.rz-admin .acct-pw__eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; color: var(--text-muted); cursor: pointer; display: inline-flex; border-radius: 4px; }\n.rz-admin .acct-pw__eye:hover, .rz-admin .acct-pw__eye[aria-pressed=\"true\"] { color: var(--text-secondary); }\n.rz-admin .acct-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }\n.rz-admin .acct-rule { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-muted); transition: color .15s; }\n.rz-admin .acct-rule--met { color: var(--signal); }\n\n/* Picture uploader (avatar, logo, favicon): one grid everywhere \u2014 preview | buttons row, hint under the buttons. */\n.rz-admin .acct-pic { border: 1px dashed var(--border); border-radius: 8px; padding: 16px 18px; background: var(--surface-0); outline: none; transition: border-color .15s; }\n.rz-admin .acct-pic:focus-visible, .rz-admin .acct-pic--over { border-color: var(--signal); border-style: solid; }\n.rz-admin .acct-pic--busy { opacity: .7; }\n.rz-admin .acct-pic__file { display: none; }\n.rz-admin .acct-pic__empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-muted); }\n.rz-admin .acct-pic__fallback { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-3); color: var(--text-muted); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }\n.rz-admin .acct-pic__fallback--circle { border-radius: 50%; }\n.rz-admin .acct-pic__or { font-size: .8125rem; }\n.rz-admin .acct-pic__has { display: flex; align-items: flex-start; gap: 16px; }\n.rz-admin .acct-pic__thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); flex-shrink: 0; }\n.rz-admin .acct-pic__thumb--circle { border-radius: 50%; }\n.rz-admin .acct-pic__meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }\n.rz-admin .acct-pic__actions { display: flex; align-items: center; gap: 14px; }\n.rz-admin .acct-pic__remove { font: inherit; font-size: .8125rem; background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-admin .acct-pic__remove:hover { color: #c0392b; }\n.rz-admin .acct-pic__remove:disabled { cursor: default; opacity: .6; }\n.rz-admin .acct-pic__hint { margin: 10px 0 0; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }\n.rz-admin .acct-pic__has .acct-pic__hint { margin-top: 0; }\n.rz-admin .acct-pic__note { margin: 8px 0 0; }\n.rz-admin .acct-pic__error { margin: 8px 0 0; font-size: .8rem; color: #c0392b; }\n\n/* Branded dropdown (role pickers): a bordered button that opens the shell's menu, checkmark on the current choice. */\n.rz-admin .acct-dd { position: relative; display: inline-block; }\n.rz-admin .acct-dd__btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .85rem; color: var(--text-primary); background: var(--surface-0); border: 1px solid var(--border); border-radius: 6px; padding: 0 .7rem; height: 34px; cursor: pointer; }\n.rz-admin .acct-dd__btn:hover { border-color: var(--text-muted); }\n.rz-admin .acct-dd__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }\n.rz-admin .acct-dd__btn:disabled { opacity: .6; cursor: default; }\n.rz-admin .acct-dd__menu { left: 0; right: auto; min-width: 15rem; padding: .3rem 0; }\n.rz-admin .acct-dd__item { align-items: flex-start; }\n.rz-admin .acct-dd__check { width: 1rem; flex-shrink: 0; color: var(--signal); font-weight: 700; }\n.rz-admin .acct-dd__text { display: flex; flex-direction: column; line-height: 1.3; }\n.rz-admin .acct-dd__hint { font-size: .74rem; color: var(--text-muted); }\n/* Team table: everything on one center line, and the role menu may overflow the table (the shell\n clips .rz-table for rounded corners, so round the header cells by hand instead). */\n.rz-admin .acct-team { overflow: visible; }\n.rz-admin .acct-team thead th:first-child { border-top-left-radius: 8px; }\n.rz-admin .acct-team thead th:last-child { border-top-right-radius: 8px; }\n.rz-admin .acct-team tbody tr:last-child td { border-bottom: 0; }\n.rz-admin .acct-team td { vertical-align: middle; }\n.rz-admin .acct-team td > * { vertical-align: middle; }\n.rz-admin .acct-team .rz-pill { position: relative; top: 0; }\n.rz-admin .acct-dd__menu { z-index: 60; }\n.rz-admin .acct-invite__row .acct-dd__btn { height: 40px; }\n\n.rz-admin .rz-term { position: relative; display: inline; }\n.rz-admin .rz-term__word { cursor: help; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }\n.rz-admin .rz-term__word:hover, .rz-admin .rz-term__word:focus-visible { text-decoration-color: var(--signal); outline: none; }\n.rz-admin .rz-term__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 272px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--text-primary); color: var(--surface-0); font-size: .8125rem; line-height: 1.4; font-weight: 400; box-shadow: 0 8px 24px rgba(14,23,38,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }\n.rz-admin .rz-term__tip--open { opacity: 1; }\n\n/* ---- Help center ---------------------------------------------------- */\n.rz-admin .rz-help__search { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }\n.rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }\n.rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }\n.rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }\n.rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }\n.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; white-space: nowrap; }\n.rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }\n/* Phones: sections become one row of chips that scrolls sideways above the content (must come\n after the desktop rules above \u2014 same specificity, last one wins). */\n@media (max-width: 760px) {\n .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; }\n .rz-admin .rz-help__nav { position: static; flex-direction: row; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: .1rem 14px .4rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }\n .rz-admin .rz-help__nav::-webkit-scrollbar { display: none; }\n .rz-admin .rz-help__navitem { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; background: var(--surface-1); }\n .rz-admin .rz-help__navitem--active { border-color: var(--signal); }\n}\n.rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }\n.rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }\n.rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }\n.rz-admin .rz-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }\n.rz-admin .rz-help__card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--rz-radius); text-decoration: none; color: inherit; transition: border-color .15s; }\n.rz-admin .rz-help__card:hover { border-color: var(--signal); }\n.rz-admin .rz-help__meta { font-family: var(--rz-font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }\n.rz-admin .rz-help__title { font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-help__summary { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }\n.rz-admin .rz-help__crumb { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rz-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-decoration: none; margin: 0 0 1rem; }\n.rz-admin .rz-help__crumb:hover { color: var(--signal); }\n.rz-admin .rz-help__prose { line-height: 1.65; color: var(--text-primary); }\n.rz-admin .rz-help__prose > * + * { margin-top: .85rem; }\n.rz-admin .rz-help__prose h2 { font-family: var(--rz-font-display); font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; }\n.rz-admin .rz-help__prose h3 { font-size: .95rem; font-weight: 600; margin-top: 1.25rem; }\n.rz-admin .rz-help__prose p, .rz-admin .rz-help__prose li { color: var(--text-secondary); }\n.rz-admin .rz-help__prose strong { color: var(--text-primary); font-weight: 600; }\n.rz-admin .rz-help__prose ul, .rz-admin .rz-help__prose ol { padding-left: 1.35rem; }\n.rz-admin .rz-help__prose li + li { margin-top: .3rem; }\n.rz-admin .rz-help__prose code { font-family: var(--rz-font-mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05em .35em; }\n.rz-admin .rz-help__prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rz-radius); padding: .8rem 1rem; overflow-x: auto; }\n.rz-admin .rz-help__prose pre code { background: transparent; border: 0; padding: 0; font-size: .82rem; line-height: 1.55; }\n.rz-admin .rz-help__prose blockquote { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--signal); color: var(--text-secondary); }\n.rz-admin .rz-help__prose a { color: var(--signal); text-decoration: none; }\n.rz-admin .rz-help__prose a:hover { color: var(--text-primary); }\n.rz-admin .rz-help__prose .rz-table td { white-space: normal; color: var(--text-secondary); }\n.rz-admin .rz-help__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--separator); font-size: .875rem; }\n.rz-admin .rz-help__pager a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); text-decoration: none; }\n.rz-admin .rz-help__pager a:hover { color: var(--signal); }\n.rz-admin .rz-arrow--back { transform: none; }\n@media (prefers-reduced-motion: no-preference) { .rz-admin a:hover .rz-arrow--back { transform: translateX(-4px); } }\n\n/* ---- Studio update strip / Settings \u2192 Studio ---------------------------- */\n.rz-admin .rz-update { border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--signal) 5%, var(--surface-1)); padding: .75rem 1.1rem; }\n.rz-admin .rz-update--strip { margin: 0 0 1.5rem; }\n.rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }\n.rz-admin .rz-update__title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text-primary); }\n.rz-admin .rz-update--line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem 1.1rem; font-size: .875rem; }\n.rz-admin .rz-update--line .rz-update__later { margin-left: auto; }\n.rz-admin .rz-update__row .rz-update__done { flex: 1; margin-top: .5rem; }\n.rz-admin .rz-update__row .rz-update__later { align-self: flex-end; margin-top: .5rem; }\n.rz-admin .rz-update__title::before { content: \"\"; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }\n.rz-admin .rz-update__link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--signal); cursor: pointer; text-decoration: none; }\n.rz-admin .rz-update__link:hover { color: var(--text-primary); }\n.rz-admin .rz-update__later { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }\n.rz-admin .rz-update__later:hover { color: var(--text-primary); }\n.rz-admin .rz-update__notes { margin: .6rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }\n.rz-admin .rz-update__problem { margin: .6rem 0 0; font-size: .875rem; color: var(--status-down); }\n.rz-admin .rz-update__done { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }\n";
|
|
396
396
|
|
|
397
397
|
/**
|
|
398
398
|
* Plain-English facts about how Studio works — the text a site's help
|
package/dist/studio-ui/index.js
CHANGED
|
@@ -733,7 +733,7 @@ function Tabs({ options, value, onChange, label = "Sections" }) {
|
|
|
733
733
|
}
|
|
734
734
|
|
|
735
735
|
// src/version.ts
|
|
736
|
-
var ADMIN_VERSION = "0.15.
|
|
736
|
+
var ADMIN_VERSION = "0.15.9" ;
|
|
737
737
|
|
|
738
738
|
// src/studio-ui/css.ts
|
|
739
739
|
var STUDIO_CSS = `
|
|
@@ -900,12 +900,20 @@ var STUDIO_CSS = `
|
|
|
900
900
|
.rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
|
|
901
901
|
.rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }
|
|
902
902
|
.rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
|
|
903
|
-
@media (max-width: 760px) { .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; } .rz-admin .rz-help__nav { display: flex; flex-wrap: wrap; gap: .25rem; } }
|
|
904
903
|
.rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }
|
|
905
|
-
.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; }
|
|
904
|
+
.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; white-space: nowrap; }
|
|
906
905
|
.rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }
|
|
907
906
|
.rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }
|
|
908
907
|
.rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }
|
|
908
|
+
/* Phones: sections become one row of chips that scrolls sideways above the content (must come
|
|
909
|
+
after the desktop rules above \u2014 same specificity, last one wins). */
|
|
910
|
+
@media (max-width: 760px) {
|
|
911
|
+
.rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; }
|
|
912
|
+
.rz-admin .rz-help__nav { position: static; flex-direction: row; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: .1rem 14px .4rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
|
|
913
|
+
.rz-admin .rz-help__nav::-webkit-scrollbar { display: none; }
|
|
914
|
+
.rz-admin .rz-help__navitem { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; background: var(--surface-1); }
|
|
915
|
+
.rz-admin .rz-help__navitem--active { border-color: var(--signal); }
|
|
916
|
+
}
|
|
909
917
|
.rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }
|
|
910
918
|
.rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }
|
|
911
919
|
.rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }
|
|
@@ -1065,7 +1073,8 @@ function InstallTracker({ installing, compact = false }) {
|
|
|
1065
1073
|
}, []);
|
|
1066
1074
|
const minimize = (on) => {
|
|
1067
1075
|
try {
|
|
1068
|
-
on
|
|
1076
|
+
if (on) localStorage.setItem(MIN_KEY, "1");
|
|
1077
|
+
else localStorage.removeItem(MIN_KEY);
|
|
1069
1078
|
} catch {
|
|
1070
1079
|
}
|
|
1071
1080
|
setMinimized(on);
|
|
@@ -5597,6 +5606,12 @@ function StudioHelp() {
|
|
|
5597
5606
|
};
|
|
5598
5607
|
const hits = q.trim().length > 1 ? searchHelp(q) : null;
|
|
5599
5608
|
const activeSection = view.kind === "section" ? view.id : view.article.section;
|
|
5609
|
+
const nav = useRef(null);
|
|
5610
|
+
useEffect(() => {
|
|
5611
|
+
const el = nav.current;
|
|
5612
|
+
if (!el || el.scrollWidth <= el.clientWidth) return;
|
|
5613
|
+
el.querySelector(".rz-help__navitem--active")?.scrollIntoView?.({ inline: "center", block: "nearest" });
|
|
5614
|
+
}, [activeSection, hits]);
|
|
5600
5615
|
return /* @__PURE__ */ jsxs("div", { ref: top, className: "rz-help", children: [
|
|
5601
5616
|
/* @__PURE__ */ jsx(PageHeader, { eyebrow: "Help", title: "Help center", subtitle: "Everything about running your website from Studio, in plain English. Search, or browse by section." }),
|
|
5602
5617
|
/* @__PURE__ */ jsxs("div", { className: "rz-help__search", children: [
|
|
@@ -5620,7 +5635,7 @@ function StudioHelp() {
|
|
|
5620
5635
|
)
|
|
5621
5636
|
] }),
|
|
5622
5637
|
/* @__PURE__ */ jsxs("div", { className: "rz-help__body", children: [
|
|
5623
|
-
/* @__PURE__ */ jsx("nav", { className: "rz-help__nav", "aria-label": "Help sections", children: HELP_SECTIONS.map((s) => /* @__PURE__ */ jsx("a", { href: `#s-${s.id}`, className: `rz-help__navitem${!hits && activeSection === s.id ? " rz-help__navitem--active" : ""}`, onClick: (e) => {
|
|
5638
|
+
/* @__PURE__ */ jsx("nav", { ref: nav, className: "rz-help__nav", "aria-label": "Help sections", children: HELP_SECTIONS.map((s) => /* @__PURE__ */ jsx("a", { href: `#s-${s.id}`, className: `rz-help__navitem${!hits && activeSection === s.id ? " rz-help__navitem--active" : ""}`, onClick: (e) => {
|
|
5624
5639
|
e.preventDefault();
|
|
5625
5640
|
go(`s-${s.id}`);
|
|
5626
5641
|
}, children: s.title }, s.id)) }),
|