Add badges styling

style/css_html_js.py

@@ -173,6 +173,46 @@ flex-grow: 0;
     text-decoration: underline;
     opacity: 0.8;
 }
+
+.badge {
+  display: inline-flex;   
+  align-items: center;    
+  line-height: 1;         
+  vertical-align: middle; 
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  padding: 2px 4px 0px 4px;
+  border-radius: 6px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.reasoning-badge {
+  opacity: 0.5;
+  background-color: #fdf2f8;
+  color:            #9d174d;
+  border: 1px solid #fbcfe8;
+}
+
+.new-badge {
+  color:            #ab8900;
+  border: 1px dashed #d9b31c;
+}
+
+@media (prefers-color-scheme: dark) {
+  .reasoning-badge {
+    opacity: 0.7;
+    background-color: #4a044e;
+    color:            #f5d0fe;
+    border-color:     #c026d3;
+  }
+  .new-badge {
+    opacity: 0.8;
+    color:            #fde68a;
+    border-color:     #bda237
+  }
+}
 """
 
 get_window_url_params = """

utils.py

@@ -17,14 +17,14 @@ type_emoji = {
 
 def model_hyperlink(link, model_name, release, thinking=False):
     ret = f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">{model_name}</a>'
-    new_badge = f' <span style="opacity: 0.7; font-variant: all-small-caps; font-weight: 600">new</span>'
-    reasoning_badge = f' <span style="opacity: 0.9; font-variant: all-small-caps; font-weight: 600; color: #5C6BC0">(reasoning)</span>'
+    new_badge = f' <span class="badge new-badge">new</span>'
+    reasoning_badge = f' <span class="badge reasoning-badge">reasoning</span>'
 
     if release == "V1":
         return ret + reasoning_badge if thinking == "Reasoning" else ret
     else:
         return (
-            ret + new_badge + reasoning_badge
+            ret + reasoning_badge + new_badge
             if thinking == "Reasoning"
             else ret + new_badge
         )