users: add username tooltips.

app/javascript/src/styles/specific/common_tooltips.scss

@@ -0,0 +1,51 @@
+div[data-tippy-root].tooltip-loading {
+  visibility: hidden !important;
+}
+
+.tippy-box[data-theme~="common-tooltip"] {
+  box-sizing: border-box;
+
+  border: 1px solid var(--post-tooltip-border-color);
+  border-radius: 4px;
+
+  color: var(--text-color);
+  background-color: var(--post-tooltip-background-color);
+  background-clip: padding-box;
+  box-shadow: var(--post-tooltip-box-shadow);
+
+  /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
+  &[data-placement^=bottom] {
+    > .tippy-arrow:before {
+      border-bottom-color: var(--post-tooltip-background-color);
+      bottom: 16px;
+    }
+
+    > .tippy-arrow:after {
+      border-bottom-color: var(--post-tooltip-border-color);
+      border-width: 0 7px 7px;
+      top: -8px;
+      left: 1px;
+    }
+  }
+
+  &[data-placement^=top] {
+    > .tippy-arrow:before {
+      border-top-color: var(--post-tooltip-background-color);
+    }
+
+    > .tippy-arrow:after {
+      border-top-color: var(--post-tooltip-border-color);
+      border-width: 7px 7px 0;
+      top: 17px;
+      left: 1px;
+    }
+  }
+
+  > .tippy-arrow:after {
+    border-color: transparent;
+    border-style: solid;
+    content: "";
+    position: absolute;
+    z-index: -1;
+  }
+}

app/javascript/src/styles/specific/post_tooltips.scss

@@ -47,17 +47,9 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
 
 .tippy-box[data-theme~="post-tooltip"] {
   min-width: 200px;
-  box-sizing: border-box;
   font-size: 11px;
   line-height: $tooltip-line-height;
 
-  border: 1px solid var(--post-tooltip-border-color);
-  border-radius: 4px;
-
-  background-color: var(--post-tooltip-background-color);
-  background-clip: padding-box;
-  box-shadow: var(--post-tooltip-box-shadow);
-
   .tippy-content {
     padding: 0;
 
@@ -118,44 +110,4 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
       font-size: 10px;
     }
   }
-
-  /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
-  &[data-placement^=bottom] {
-    > .tippy-arrow:before {
-      border-bottom-color: var(--post-tooltip-background-color);
-      bottom: 16px;
-    }
-
-    > .tippy-arrow:after {
-      border-bottom-color: var(--post-tooltip-border-color);
-      border-width: 0 7px 7px;
-      top: -8px;
-      left: 1px;
-    }
-  }
-
-  &[data-placement^=top] {
-    > .tippy-arrow:before {
-      border-top-color: var(--post-tooltip-background-color);
-    }
-
-    > .tippy-arrow:after {
-      border-top-color: var(--post-tooltip-border-color);
-      border-width: 7px 7px 0;
-      top: 17px;
-      left: 1px;
-    }
-  }
-
-  > .tippy-arrow:after {
-    border-color: transparent;
-    border-style: solid;
-    content: "";
-    position: absolute;
-    z-index: -1;
-  }
-}
-
-div[data-tippy-root].post-tooltip-loading {
-  visibility: hidden !important;
 }

app/javascript/src/styles/specific/user_tooltips.scss

@@ -0,0 +1,78 @@
+.tippy-box[data-theme~="user-tooltip"] {
+  line-height: 1.25em;
+  min-width: 350px;
+
+  .user-tooltip-header {
+    margin-bottom: 1em;
+    display: grid;
+    grid:
+      "avatar header-top"
+      "avatar header-bottom" /
+      32px 1fr;
+    column-gap: 0.25em;
+
+    .user-tooltip-avatar {
+      font-size: 32px;
+      grid-area: avatar;
+      align-self: center;
+    }
+
+    .user-tooltip-header-top {
+      grid-area: header-top;
+
+      .user-tooltip-badge {
+        color: var(--inverse-text-color);
+        font-size: 0.70em;
+        padding: 2px 4px;
+        margin-right: 0.25em;
+        border-radius: 3px;
+
+        &.user-tooltip-badge-admin { background-color: var(--user-admin-color); }
+        &.user-tooltip-badge-moderator { background-color: var(--user-moderator-color); }
+        &.user-tooltip-badge-approver { background-color: var(--user-builder-color); }
+        &.user-tooltip-badge-contributor { background-color: var(--user-builder-color); }
+        &.user-tooltip-badge-builder { background-color: var(--user-builder-color); }
+        &.user-tooltip-badge-platinum { background-color: var(--user-platinum-color); }
+        &.user-tooltip-badge-gold { background-color: var(--user-gold-color); }
+        &.user-tooltip-badge-member { background-color: var(--user-member-color); }
+        &.user-tooltip-badge-banned { background-color: var(--user-banned-color); }
+
+        &.user-tooltip-badge-positive-feedback {
+          color: var(--user-tooltip-positive-feedback-color);
+          border: 1px solid;
+        }
+
+        &.user-tooltip-badge-negative-feedback {
+          color: var(--user-tooltip-negative-feedback-color);
+          border: 1px solid;
+        }
+      }
+    }
+
+    .user-tooltip-header-bottom {
+      grid-area: header-bottom;
+      color: var(--muted-text-color);
+      font-size: 0.75em;
+    }
+  }
+
+  .user-tooltip-stats {
+    display: grid;
+    grid: auto / repeat(3, 1fr);
+    column-gap: 1em;
+    row-gap: 0.5em;
+
+    .user-tooltip-stat-item {
+      text-align: center;
+
+      .user-tooltip-stat-value {
+        font-weight: bold;
+      }
+
+      .user-tooltip-stat-name {
+        font-size: 0.90em;
+        color: var(--muted-text-color);
+      }
+    }
+  }
+}