Work on #587: revamped templates

web/styles/colors.scss

@@ -114,9 +114,15 @@
     color: var(--modal-selected-option-color);
   }
 
-  .sb-result-list .sb-hint {
-    color: var(--modal-hint-color);
-    background-color: var(--modal-hint-background-color);
+  .sb-result-list {
+    .sb-hint {
+      color: var(--modal-hint-color);
+      background-color: var(--modal-hint-background-color);
+    }
+
+    .sb-description {
+      color: var(--modal-description-color);
+    }
   }
 }
 

web/styles/modals.scss

@@ -61,6 +61,10 @@
       position: relative;
       top: 3px;
     }
+
+    .sb-description {
+      font-size: 75%;
+    }
   }
 
   .sb-option,
@@ -81,4 +85,4 @@
     padding-bottom: 3px;
     border-radius: 5px;
   }
-}
+}

web/styles/theme.scss

@@ -36,6 +36,7 @@ html {
   --modal-selected-option-color: #eee;
   --modal-hint-background-color: #212476;
   --modal-hint-color: #eee;
+  --modal-description-color: #aaa;
 
   --notifications-background-color: inherit;
   --notifications-border-color: rgb(41, 41, 41);
@@ -153,6 +154,7 @@ html[data-theme="dark"] {
   --modal-selected-option-color: #eee;
   --modal-hint-background-color: #212476;
   --modal-hint-color: #eee;
+  --modal-description-color: #aaa;
 
   --notifications-background-color: #333;
   --notifications-border-color: rgb(197, 197, 197);