From b119660a54f2b89976d8fbe93da09ad5bb467e2a Mon Sep 17 00:00:00 2001
From: MareStare <mare.stare.official@gmail.com>
Date: Tue, 4 Mar 2025 04:39:20 +0000
Subject: [PATCH] Add new styles for the suggestions popup to CSS

---
 assets/css/views/tags.css | 84 +++++++++++++++++++++++++++++++++++----
 1 file changed, 77 insertions(+), 7 deletions(-)

diff --git a/assets/css/views/tags.css b/assets/css/views/tags.css
index 057f8ca9..f0b87514 100644
--- a/assets/css/views/tags.css
+++ b/assets/css/views/tags.css
@@ -24,27 +24,97 @@
 }
 
 /* Autocomplete */
-.autocomplete__list {
+.autocomplete {
   cursor: pointer;
   display: inline-block;
-  list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
   user-select: none;
   white-space: nowrap;
   z-index: 999;
+  font-family: var(--font-family-monospace);
+  background: var(--background-color);
+
+  /* Borders */
+  border-style: solid;
+  border-width: 1px;
+  border-top-width: 0;
+  border-color: var(--meta-border-color);
+
+  /* Poor man's hack to make sure autocomplete doesn't grow beyond the viewport */
+  max-width: 70vw;
+}
+
+.autocomplete__separator {
+  margin: 0;
 }
 
 .autocomplete__item {
-  background: var(--base-color);
-  color: var(--link-light-color);
   padding: 5px;
 }
 
-.autocomplete__item--selected {
-  background: var(--link-light-color);
-  color: var(--base-color);
+.autocomplete__item__content {
+  /* Squash overly long suggestions */
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.autocomplete__item__tag {
+  color: var(--foreground-color);
+  display: flex;
+  justify-content: space-between;
+  white-space: pre;
+}
+
+.autocomplete__item__history {
+  color: var(--block-header-link-text-color);
+}
+
+.autocomplete__item__history__icon {
+  /*
+  Makes the history icon aligned in width with the autocomplete__item__tag's icon.
+  Yes, it's a dirty hack, don't look at me like that >_<, but turns out font-awesome
+  icons aren't actually all of the same size!
+  */
+  font-size: 11.38px;
+}
+
+.autocomplete__item__history__match {
+  font-weight: bold;
+
+  /* Use a lighter color to highlight the matched part of the query */
+  color: lch(from var(--block-header-link-text-color) calc(l + 20) c h);
+}
+
+.autocomplete__item__tag__match {
+  font-weight: bold;
+}
+
+.autocomplete__item__tag__match:not(.autocomplete__item--selected) {
+  /* Use a lighter color to highlight the matched part of the query */
+  color: lch(from var(--foreground-color) calc(l + 20) c h);
+}
+
+.autocomplete__item__tag__count {
+  color: var(--foreground-half-color);
+
+  /*
+    Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
+    This way the number is more compact and easier to read.
+  */
+  word-spacing: -3px;
+}
+
+.autocomplete__item:hover:not(.autocomplete__item--selected) {
+  background: lch(from var(--background-color) calc(l + 10) c h);
+}
+
+.autocomplete__item--selected,
+.autocomplete__item--selected .autocomplete__item__history__match,
+.autocomplete__item--selected .autocomplete__item__tag__match {
+  background: var(--foreground-color);
+  color: var(--background-color);
 }
 
 /* Tags */