fix(catalog/webui): make the official-catalog "Re-enable" button inline, full-height & clickable
When the official catalog is hidden, its "Re-enable" action rendered as a flat, greyed-out ~27px pill pinned to the top-left of the row — shorter than the 44px URL field and not obviously clickable (the generic .btn-secondary loses its nebula-theme polish outside .config-actions, so it fell back to an unstyled base button). - The action column now align-self:stretch, so its control matches the URL field's height and sits inline (also vertically centres the compact × in the enabled state). - The Re-enable button gets a dedicated .catalog-reenable-btn treatment: accent fill + accent border + hover state + an eye icon, filling the row height so it lines up with the input and clearly reads as a button. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
126f563a07
commit
64d298c6db
@ -188,7 +188,7 @@ window.validateCatalogFormat = function (input) {
|
|||||||
window.officialCatalogActionHTML = function (enabled) {
|
window.officialCatalogActionHTML = function (enabled) {
|
||||||
return enabled
|
return enabled
|
||||||
? `<button type="button" class="delete-domain-btn" title="Remove the official catalog from browsing" onclick="window.deleteOfficialCatalog()"><span class="delete-icon">×</span></button>`
|
? `<button type="button" class="delete-domain-btn" title="Remove the official catalog from browsing" onclick="window.deleteOfficialCatalog()"><span class="delete-icon">×</span></button>`
|
||||||
: `<button type="button" class="btn btn-secondary" style="padding:.3rem .8rem;" onclick="window.enableOfficialCatalog()">Re-enable</button>`;
|
: `<button type="button" class="catalog-reenable-btn" title="Show the official catalog in browsing again" onclick="window.enableOfficialCatalog()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Re-enable</button>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
window.deleteOfficialCatalog = function () {
|
window.deleteOfficialCatalog = function () {
|
||||||
|
|||||||
@ -324,6 +324,44 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Official-catalog row action column. align-self:stretch makes it match the
|
||||||
|
URL field's height (whatever that computes to), so its button sits inline and
|
||||||
|
the same height as the input — and centres the compact × in the enabled
|
||||||
|
state instead of pinning it to the top. */
|
||||||
|
.domain-header [data-official-action] {
|
||||||
|
align-self: stretch;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Re-enable action (shown when the official catalog is hidden). A clear
|
||||||
|
accent-tinted, accent-bordered button with a hover state so it reads as
|
||||||
|
clickable — the generic .btn-secondary loses its themed polish outside
|
||||||
|
.config-actions and rendered as a flat, greyed-out pill. Fills the row
|
||||||
|
height (100% of the stretched column) to line up with the URL field. */
|
||||||
|
.catalog-reenable-btn {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(var(--accent-rgb), 0.55);
|
||||||
|
background: rgba(var(--accent-rgb), 0.16);
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
|
||||||
|
}
|
||||||
|
.catalog-reenable-btn:hover {
|
||||||
|
background: rgba(var(--accent-rgb), 0.26);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
.catalog-reenable-btn:active { transform: translateY(1px); }
|
||||||
|
|
||||||
/* Responsive column counts — colocated here (and not in style.css)
|
/* Responsive column counts — colocated here (and not in style.css)
|
||||||
because the base 3-column rule above loads later than style.css,
|
because the base 3-column rule above loads later than style.css,
|
||||||
so the unscoped base would otherwise win the cascade against the
|
so the unscoped base would otherwise win the cascade against the
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user