diff options
| -rw-r--r-- | src/content/dependencies/generateColorStyleVariables.js | 2 | ||||
| -rw-r--r-- | src/static/css/site.css | 23 | ||||
| -rw-r--r-- | src/static/js/client.js | 8 | ||||
| -rw-r--r-- | src/util/colors.js | 2 |
4 files changed, 33 insertions, 2 deletions
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js index 069d85dd..5270dbe4 100644 --- a/src/content/dependencies/generateColorStyleVariables.js +++ b/src/content/dependencies/generateColorStyleVariables.js @@ -32,6 +32,7 @@ export default { dim, deep, deepGhost, + lightGhost, bg, bgBlack, shadow, @@ -43,6 +44,7 @@ export default { `--dim-color: ${dim}`, `--deep-color: ${deep}`, `--deep-ghost-color: ${deepGhost}`, + `--light-ghost-color: ${lightGhost}`, `--bg-color: ${bg}`, `--bg-black-color: ${bgBlack}`, `--shadow-color: ${shadow}`, diff --git a/src/static/css/site.css b/src/static/css/site.css index d2c121e6..4fc2d8a3 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -500,9 +500,27 @@ summary .group-name { } .wiki-search-result { + position: relative; display: flex; - padding: 0 6px; - margin: 3px 0 5px 0; + padding: 4px 3px 4px 6px; +} + +.wiki-search-result::before { + content: ''; + position: absolute; + top: -2px; + bottom: -2px; + left: 0; + right: 0; + + border: 2px solid var(--primary-color); + border-radius: 4px; + display: none; +} + +.wiki-search-result:hover::before { + display: block; + background: var(--light-ghost-color); } .wiki-search-result-name { @@ -517,6 +535,7 @@ summary .group-name { width: 1.8em; height: 1.8em; margin-right: 6px; + border-radius: 2px; } .wiki-search-result-image-placeholder { diff --git a/src/static/js/client.js b/src/static/js/client.js index 0a4dc0ff..93cbb902 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -5,6 +5,7 @@ // that cannot 8e done at static-site compile time, 8y its fundamentally // ephemeral nature. +import {getColors} from '../shared-util/colors.js'; import {accumulateSum, atOffset, empty, filterMultipleArrays, stitchArrays} from '../shared-util/sugar.js'; @@ -3545,6 +3546,13 @@ function showSidebarSearchResults(results) { link.setAttribute('href', openTrack(result.directory)); cssProp(link, '--primary-color', result.data.color); + try { + const colors = getColors(result.data.color, {chroma}); + cssProp(link, '--light-ghost-color', colors.lightGhost); + } catch (error) { + console.warn(error); + } + const span = document.createElement('span'); span.classList.add('wiki-search-result-name'); diff --git a/src/util/colors.js b/src/util/colors.js index 50339cd3..7298c46a 100644 --- a/src/util/colors.js +++ b/src/util/colors.js @@ -15,6 +15,7 @@ export function getColors(themeColor, { const deep = primary.saturate(1.2).luminance(0.035); const deepGhost = deep.alpha(0.8); const light = chroma.average(['#ffffff', primary], 'rgb', [4, 1]); + const lightGhost = primary.luminance(0.8).saturate(4).alpha(0.08); const bg = primary.luminance(0.008).desaturate(3.5).alpha(0.8); const bgBlack = primary.saturate(1).luminance(0.0025).alpha(0.8); @@ -31,6 +32,7 @@ export function getColors(themeColor, { deep: deep.hex(), deepGhost: deepGhost.hex(), light: light.hex(), + lightGhost: lightGhost.hex(), bg: bg.hex(), bgBlack: bgBlack.hex(), |