diff --git a/api/components/tooltip.css b/api/components/tooltip.css index b919963..cb52358 100644 --- a/api/components/tooltip.css +++ b/api/components/tooltip.css @@ -5,21 +5,24 @@ */ #enhancer--tooltip { - position: absolute; background: var(--theme--ui_tooltip); - font-size: 11.5px; - padding: 0.15rem 0.4rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; border-radius: 3px; - max-width: 20rem; + box-shadow: var(--theme--ui_shadow) 0px 1px 4px; + color: var(--theme--ui_tooltip-description); display: none; + font-size: 12px; + font-weight: 500; + line-height: 1.4; + max-width: 20rem; + overflow: hidden; + padding: 4px 8px; + position: absolute; } #enhancer--tooltip p { margin: 0.25rem 0; } -#enhancer--tooltip p:first-child { +#enhancer--tooltip b, +#enhancer--tooltip strong { + font-weight: 500; color: var(--theme--ui_tooltip-title); } -#enhancer--tooltip p:not(:first-child) { - color: var(--theme--ui_tooltip-description); -} diff --git a/api/components/tooltip.mjs b/api/components/tooltip.mjs index e52d3f0..9dffd4b 100644 --- a/api/components/tooltip.mjs +++ b/api/components/tooltip.mjs @@ -23,9 +23,9 @@ web.loadStylesheet('api/components/tooltip.css'); */ export const tooltip = ($ref, text) => { web.render(document.body, _$tooltip); - text = fmt.md.render(text); + text = web.html`${fmt.md.render(text)}`; $ref.addEventListener('mouseover', (event) => { - _$tooltip.innerHTML = text; + web.render(web.empty(_$tooltip), text); _$tooltip.style.display = 'block'; }); $ref.addEventListener('mousemove', (event) => { diff --git a/api/registry.mjs b/api/registry.mjs index 54ee095..462f3b3 100644 --- a/api/registry.mjs +++ b/api/registry.mjs @@ -153,6 +153,7 @@ export const db = async (id) => { return storage.db( [id], async (path, fallback = undefined) => { + if (typeof path === 'string') path = [path]; if (path.length === 2) { // profiles -> profile -> mod -> option fallback = (await optionDefault(id, path[1])) ?? fallback;