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);