tag style updates on web

web/index.html

@@ -150,34 +150,34 @@
       .ProseMirror .inline-tag,
       .ProseMirror .mention {
         position: relative;
-        margin: 0 6px;
       }
-      .ProseMirror .inline-tag::after,
+      .ProseMirror .inline-tag,
-      .ProseMirror .mention::after {
+      .ProseMirror .mention {
-        content: '';
+        border-radius: 4px;
-        position: absolute;
+        background-color: var(--backgroundLight);
-        top: 0;
+        padding: 0 2px 1px;
-        bottom: -2px;
+
-        left: -8px;
+        /* This approach works, but we can't do rounded corners
-        right: -8px;
+        background-color: var(--backgroundLight);
-        z-index: -1;
+        box-shadow: -3px 0 var(--backgroundLight), -3px 2px var(--backgroundLight), 2px 0 var(--backgroundLight), 2px 2px var(--backgroundLight);
-        opacity: 0.3;
+        */
-        border-radius: 30px;
+
-        border-width: 1px;
+        /*
-        border-style: solid;
+        This sorta works but not enough padding aroundd the next, looks bad.
+
+        border-radius: 4px;
+        background-color: red;
+        box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
+        */
       }
       .ProseMirror .inline-tag {
         color: var(--text);
       }
-      .ProseMirror .inline-tag::after {
-        background-color: var(--background);
-        border-color: var(--border):
-      }
       .ProseMirror .mention {
-        color: var(--yellow);
+        color: var(--text);
-      }
-      .ProseMirror .mention::after {
         background-color: var(--yellow);
+        box-shadow: -3px 0 var(--yellow), -3px 2px var(--yellow), 2px 0 var(--yellow), 2px 2px var(--yellow);
       }
 
       /* Tooltips */