Fixed voice work supported language search. Include supported languages and original circle in the search result item. Several UI style updates.

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -592,6 +592,7 @@ code {
 .j-tags {
     display: flex;
     gap: .75rem .5rem;
+    gap: .5rem .5rem;
     flex-wrap: wrap;
     /*gap: .5rem 1rem;*/
 }
@@ -647,41 +648,70 @@ code {
 .j-chip {
     display: inline-flex;
     align-items: center;
-    gap: .4rem;
+    gap: .5em;
     font-size: 1rem;
     font-weight: 500;
     font-size: .8rem;
     font-weight: 400;
+    /*--chip-rgb: var(--secondary-rgb, 148 163 184);
+    --chip-tint-alpha: 0.12;*/
+
     --chip-rgb: var(--secondary-rgb, 148 163 184);
+    --chip-bg-rgb: transparent;
+    --chip-fg-rgb: var(--chip-rgb);
+    --chip-border-rgb: transparent;
     --chip-tint-alpha: 0.12;
+    color: rgb(var(--chip-fg-rgb));
+    background: rgb(var(--chip-bg-rgb));
+    border: 1px solid rgb(var(--chip-border-rgb));
+    padding: .5em 1em;
+    border-radius: 1rem;
+    border: 1px solid transparent;
 }
 
     .j-chip.is-clickable {
         cursor: pointer;
         user-select: none;
-        --chip-hover-alpha: 0.2;
-        transition: .2s linear;
+        transition: background .2s linear, color .2s linear, border-color .2s linear, filter .2s linear;
     }
 
         .j-chip.is-clickable:hover {
-            background: rgb(var(--chip-rgb) / var(--chip-hover-alpha));
+            filter: brightness(1.2);
         }
 
     .j-chip.varient-filled {
-        padding: .4rem .8rem;
-        border-radius: 1rem;
+        --chip-bg-rgb: var(--chip-rgb);
+        --chip-border-rgb: var(--chip-rgb);
     }
 
+    /*.j-chip.varient-outlined {
+        --chip-bg-rgb: transparent;
+        --chip-fg-rgb: var(--chip-rgb);
+        --chip-border-rgb: var(--chip-rgb);
+    }*/
+
     .j-chip.varient-outlined {
-        border-width: 1px;
-        border-style: solid;
-        padding: .4rem .8rem;
-        border-radius: 1rem;
-        border-color: rgb(var(--chip-rgb));
+        background: rgba(0,0,0,.35);
+        border: 1px solid rgb(var(--chip-rgb) / 0.65);
         color: rgb(var(--chip-rgb));
-        background: transparent;
     }
 
+/*    .j-chip.varient-tint {
+        --chip-bg-rgb: var(--chip-rgb) / var(--chip-tint-alpha);
+        --chip-fg-rgb: var(--chip-rgb);
+        --chip-border-rgb: transparent;
+    }*/
+
+    .j-chip.varient-tint {
+        --chip-bg-alpha: 0.14;
+        --chip-border-alpha: 0.32;
+        color: rgb(var(--chip-rgb));
+        background: rgb(var(--chip-rgb) / var(--chip-bg-alpha));
+        /*border: 1px solid rgb(var(--chip-rgb) / var(--chip-border-alpha));*/
+    }
+
+
+    /* Old ? */
     .j-chip.tone-tint {
         background: rgb(var(--chip-rgb) / var(--chip-tint-alpha));
     }
@@ -698,6 +728,74 @@ code {
         --chip-rgb: var(--rgb-teal);
     }
 
+    /* New */
+    .j-chip.color-primary {
+        --chip-rgb: var(--rgb-primary);
+    }
+
+    .j-chip.varient-filled.color-primary {
+        --chip-fg-rgb: var(--rgb-on-primary, 0 0 0);
+    }
+
+    .j-chip.color-secondary {
+        --chip-rgb: var(--rgb-secondary);
+    }
+
+    .j-chip.varient-filled.color-secondary {
+        --chip-fg-rgb: var(--rgb-on-secondary, 0 0 0);
+    }
+
+    .j-chip.color-mint {
+        --chip-rgb: var(--rgb-mint);
+    }
+
+    .j-chip.varient-filled.color-mint {
+        --chip-fg-rgb: var(--rgb-on-mint, 0 0 0);
+    }
+
+    .j-chip.color-green {
+        --chip-rgb: var(--rgb-green);
+    }
+
+    .j-chip.varient-filled.color-green {
+        --chip-fg-rgb: var(--rgb-on-green, 255 255 255);
+    }
+
+    .j-chip.color-yellow {
+        color: rgb(var(--chip-fg-rgb));
+        --chip-rgb: var(--rgb-yellow);
+    }
+
+    .j-chip.varient-filled.color-yellow {
+        --chip-fg-rgb: var(--rgb-on-yellow, 255 255 255);
+    }
+
+    .j-chip.color-pink {
+        color: rgb(var(--chip-fg-rgb));
+        --chip-rgb: var(--rgb-pink);
+    }
+
+    .j-chip.varient-filled.color-pink {
+        --chip-fg-rgb: var(--rgb-on-pink, 255 255 255);
+    }
+
+    .j-chip.color-teal {
+        --chip-rgb: var(--rgb-teal);
+    }
+
+    .j-chip.varient-filled.color-teal {
+        --chip-fg-rgb: var(--rgb-on-teal, 255 255 255);
+    }
+
+    .j-chip.color-black {
+        color: inherit;
+        --chip-rgb: 39 39 39;
+    }
+
+    .j-chip.varient-filled.color-black {
+        --chip-fg-rgb: var(--primary-text-color);
+    }
+
 /* Icons */
 .j-icon {
     mask-repeat: no-repeat;
@@ -825,6 +923,22 @@ code {
     mask-image: url("../svg/age-rating.svg");
 }
 
+.j-icon-download {
+    mask-image: url("../svg/cloud-download.svg");
+}
+
+.j-icon-download-fill {
+    mask-image: url("../svg/cloud-download-fill.svg");
+}
+
+.j-icon-microphone {
+    mask-image: url("../svg/microphone.svg");
+}
+
+.j-icon-microphone-fill {
+    mask-image: url("../svg/microphone-fill.svg");
+}
+
 .j-icon-2 {
     background-repeat: no-repeat;
     background-position: center;

JSMR.UI.Blazor/wwwroot/css/theme-frozen.css

@@ -40,9 +40,15 @@
     --input-focus-border-color: #64b5f6;
     --input-focus-box-shadow: 0 0 0 1px #93cbf9;
     /* RGB Tokens */
+    --rgb-primary: 180 200 214;
+    --rgb-secondary: 200 220 234;
     --rgb-mint: 167 243 208;
     --rgb-green: 175 224 125;
     --rgb-teal: 110 236 255;
+    --rgb-yellow: 255 224 115;
+    --rgb-on-yellow: 0 0 0;
+    --rgb-pink: 224 104 148;
+    --rgb-on-pink: 255 255 255;
     /* Colors */
     --color-primary: rgb(180,200, 214);
     --color-secondary: rgb(200,220,234);

JSMR.UI.Blazor/wwwroot/svg/cloud-download-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download-fill" viewBox="0 0 16 16">
+	<path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/cloud-download.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
+	<path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
+	<path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/microphone-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">
+	<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z"/>
+	<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>
+</svg>

JSMR.UI.Blazor/wwwroot/svg/microphone.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
+	<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>
+	<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3"/>
+</svg>