some tag styles

web/index.html

@@ -48,6 +48,9 @@
         --text: black;
         --background: white;
         --backgroundLight: #F3F3F8;
+        --blue: #0085ff;
+        --teal: #9AD5CA;
+        --yellow: #FED766;
       }
       html.colorMode--dark {
         --text: white;
@@ -133,10 +136,42 @@
       input:focus {
         outline: 0;
       }
+      /* TODO make this more obvious */
       .tippy-content .items {
         width: fit-content;
       }
 
+      /* Hashtags in ProseMirror */
+      .ProseMirror .inline-tag,
+      .ProseMirror .mention {
+        position: relative;
+        margin: 0 3px;
+      }
+      .ProseMirror .inline-tag::after,
+      .ProseMirror .mention::after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        bottom: -2px;
+        left: -3px;
+        right: -3px;
+        z-index: -1;
+        opacity: 0.3;
+        border-radius: 4px;
+      }
+      .ProseMirror .inline-tag {
+        color: var(--teal);
+      }
+      .ProseMirror .inline-tag::after {
+        background-color: var(--teal);
+      }
+      .ProseMirror .mention {
+        color: var(--yellow);
+      }
+      .ProseMirror .mention::after {
+        background-color: var(--yellow);
+      }
+
       /* Tooltips */
       [data-tooltip] {
         position: relative;