css: tweak search reuslt image & placeholder appearance

2 files changed, 8 insertions, 1 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index abaebc45..ca0e3921 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -610,17 +610,23 @@ summary .group-name {
   margin-right: 6px;
   border-radius: 2px;
   overflow: hidden;
+
+  background-color: var(--deep-color);
+  border: 2px solid var(--deep-color);
 }
 
 .wiki-search-result-image,
 .wiki-search-result-image-placeholder {
+  display: block;
   width: 1.8em;
   height: 1.8em;
   aspect-ratio: 1 / 1;
+  border-radius: 1.5px;
 }
 
 .wiki-search-result-image-placeholder {
-  display: inline-block;
+  background-color: #0004;
+  box-shadow: 0 1px 3px -1px #0008 inset;
 }
 
 .wiki-search-results:not(:has(.wiki-search-result-image)) .wiki-search-result-image-placeholder {
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 9bef44a2..8e731dfd 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -4301,6 +4301,7 @@ function generateSidebarSearchResultTemplate(slots) {
     try {
       const colors = getColors(slots.color, {chroma});
       cssProp(link, '--light-ghost-color', colors.lightGhost);
+      cssProp(link, '--deep-color', colors.deep);
     } catch (error) {
       console.warn(error);
     }