diff --git a/public/css/main.css b/public/css/main.css index 5480f4390..98bd292c6 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -2290,6 +2290,48 @@ code { border-radius: 3px; } +/* Tooltips */ +.has-tooltip { + position: relative; + cursor: default; +} + +.has-tooltip::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + padding: 6px 10px; + background: var(--color-ink); + color: var(--color-paper); + font-size: 0.6875rem; + line-height: 1.4; + border-radius: 6px; + white-space: nowrap; + pointer-events: none; + opacity: 0; + transition: opacity 0.15s ease; + z-index: 100; +} + +.has-tooltip:hover::after { + opacity: 1; +} + +/* Allow wider tooltips to wrap */ +.install-provider-badge.has-tooltip::after { + white-space: normal; + width: 220px; + text-align: center; +} + +/* Hero logo icon wrapper */ +.hero-logo-icon { + display: inline-flex; + align-items: center; +} + .download-tip { font-size: 0.8125rem; color: var(--color-ash); diff --git a/public/css/styles.css b/public/css/styles.css index 15f97a64d..39e3d3e20 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ .split-container::before { content: ''; position: absolute; @@ -3872,6 +3872,40 @@ code { padding: 1px 4px; border-radius: 3px; } +.has-tooltip { + position: relative; + cursor: default; +} +.has-tooltip::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + padding: 6px 10px; + background: var(--color-ink); + color: var(--color-paper); + font-size: 0.6875rem; + line-height: 1.4; + border-radius: 6px; + white-space: nowrap; + pointer-events: none; + opacity: 0; + transition: opacity 0.15s ease; + z-index: 100; +} +.has-tooltip:hover::after { + opacity: 1; +} +.install-provider-badge.has-tooltip::after { + white-space: normal; + width: 220px; + text-align: center; +} +.hero-logo-icon { + display: inline-flex; + align-items: center; +} .download-tip { font-size: 0.8125rem; color: var(--color-ash); diff --git a/public/index.html b/public/index.html index 849179cb7..a26125946 100644 --- a/public/index.html +++ b/public/index.html @@ -66,15 +66,15 @@