client: sidebar-search: I-beam blink for typed filter

1 files changed, 26 insertions, 3 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index f28c0c9c..f9c8cdc1 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -754,19 +754,19 @@ summary.underline-white > span:hover a:not(:hover) {
   border-radius: 4px;
 }
 
-.wiki-search-filter-link.active.shown {
+.wiki-search-filter-link:where(.active.shown) {
   animation:
     0.15s ease   0.00s forwards normal    show-filter,
     0.60s linear 0.15s infinite alternate blink-filter;
 }
 
-.wiki-search-filter-link.active:not(.shown) {
+.wiki-search-filter-link:where(.active:not(.shown)) {
   animation:
     0.00s linear 0.00s forwards normal    show-filter,
     0.60s linear 0.00s infinite alternate blink-filter;
 }
 
-.wiki-search-filter-link:not(.active).hidden {
+.wiki-search-filter-link:where(:not(.active).hidden) {
   /* We can't just reverse the show-filter animation,
    * because that won't actually start it over again.
    */
@@ -774,6 +774,24 @@ summary.underline-white > span:hover a:not(:hover) {
     0.15s ease   0.00s forwards reverse   show-filter-the-sequel;
 }
 
+.wiki-search-filter-link.active-from-query {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #000a;
+  animation: none;
+}
+
+.wiki-search-filter-link.active-from-query::after {
+  content: "I";
+  color: black;
+  font-family: monospace;
+  font-weight: 800;
+  font-size: 1.2em;
+  margin-left: 0.5ch;
+  vertical-align: middle;
+  animation: 1s steps(2, jump-none) 0.6s infinite blink-caret;
+}
+
 @keyframes show-filter {
   from {
     background: transparent;
@@ -809,6 +827,11 @@ summary.underline-white > span:hover a:not(:hover) {
   }
 }
 
+@keyframes blink-caret {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 .wiki-search-result {
   position: relative;
   display: flex;