Improve search

lakejason0 · Sep 20, 2021 · ae6f1e4 · ae6f1e4
1 parent a7a96e3
commit ae6f1e4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/resources/skin.less b/resources/skin.less
@@ -170,6 +170,32 @@ a {
   }
 }
 
+.suggestions {
+  background: @background-color-search-suggestions;
+  box-shadow: @elevation;
+
+  .suggestions-special {
+    background-color: @background-color-search-suggestions;
+    border: 1px solid @border-color-search-suggestions;
+    padding: 0.75em 2em;
+  }
+
+  .suggestions-results {
+    background-color: @background-color-search-suggestions;
+    border: 1px solid @border-color-search-suggestions;
+  }
+
+  .suggestions-result {
+    color: @color-search-suggestions-text;
+    padding: 0.65em 2em 0.35em;
+  }
+
+  .suggestions-result-current {
+    background-color: @background-color-search-suggestions-current;
+    color: @color-search-suggestions-text-current;
+  }
+}
+
 #p-logo {
   min-width: min-content;
   margin-left: 40px;

diff --git a/resources/variables.less b/resources/variables.less
@@ -14,11 +14,16 @@
   --background-color-portlet-item-hover: #eee;
   --background-color-portlet-item-focus: #ccc;
   --background-color-edit-options: #eee;
+  --background-color-search-suggestions: #fff;
+  --background-color-search-suggestions-current: #1d5492;
   --border-color-edit-options: #c8ccd1;
   --border-color-content: #ccc;
   --border-color-toggle-list: #ddd;
+  --border-color-search-suggestions: #c8ccd1;
   --subheader-color-toggle-list: rgba( 0, 0, 0, 0.6 );
   --logo-text-color-toggle-list: inherit;
+  --color-search-suggestions-text: #000;
+  --color-search-suggestions-text-current: #fff;
   --color-header: white;
   --color-base: #54595d;
   --color-gray: #a2a9b1;
@@ -39,14 +44,18 @@
 @background-color-toggle-list-card: var( --background-color-toggle-list-card );
 @background-color-toggle-list-item-hover: var( --background-color-toggle-list-item-hover );
 @background-color-toggle-list-item-focus: var( --background-color-toggle-list-item-focus );
-@background-color-edit-options: var(--background-color-edit-options);
-@border-color-edit-options: var(--border-color-edit-options);
+@background-color-edit-options: var( --background-color-edit-options );
+@background-color-search-suggestions: var( --background-color-search-suggestions );
+@background-color-search-suggestions-current: var( --background-color-search-suggestions-current );
+@border-color-edit-options: var( --border-color-edit-options );
 @background-color-portlet-item-hover: var( --background-color-portlet-item-hover );
 @background-color-portlet-item-focus: var( --background-color-portlet-item-focus );
 @border-color-content: var( --border-color-content );
 @border-color-toggle-list: var( --border-color-toggle-list );
+@border-color-search-suggestions: var(--border-color-search-suggestions);
 @subheader-color-toggle-list: var( --subheader-color-toggle-list );
 @logo-text-color-toggle-list: var( --logo-text-color-toggle-list );
+@color-search-suggestions-text: var( --color-search-suggestions-text );
 @color-header: var( --color-header );
 @color-base: var( --color-base );
 @color-gray: var( --color-gray );