ui: Fix tag separator not showing on some machines

We were using the Unicode point "Katakana middle dot" which was not showing up
on some systems. Separators may not show up the same on all machines depending
on the font used. So, use an SVG image instead.

Tests:

- On the front page and apps page, the separators appears as expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/templates/card.html

@@ -20,7 +20,7 @@
     </div>
     <div class="card-title">{{ item.name }}</div>
     <div class="card-tags">
-      {% for tag in item.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+      {% for tag in item.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
     </div>
   </a>
 </div>

plinth/templates/index.html

@@ -76,7 +76,7 @@
                           {{ shortcut.name }}
                         </div>
                         <div class="card-tags">
-                          {% for tag in shortcut.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+                          {% for tag in shortcut.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
                         </div>
                     </a>
                 </div>

static/themes/default/css/main.css

@@ -660,6 +660,15 @@ footer {
     margin: 0.5rem 0;
 }
 
+.card .tag-separator {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>%3ccircle style='fill:%236c757d' cx='8' cy='8' r='8'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    display: inline-block;
+    width: 0.1875rem;
+    height: 0.375rem;
+    margin: 0 0.5rem;
+}
+
 /* System page - special card styling */
 .system-page .card-list {
     justify-content: left;