UX: restyle quote/share popup, fix hover jitter (#19561)

app/assets/stylesheets/common/base/topic-post.scss

@@ -1,5 +1,3 @@
-$quote-share-maxwidth: 150px;
-
 .button-count.has-pending {
   span {
     background-color: var(--danger);
@@ -555,8 +553,9 @@ aside.quote {
   display: none;
   position: absolute;
   z-index: z("dropdown");
-  opacity: 0.9;
-  background-color: var(--secondary-high);
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-low);
+  box-shadow: shadow("card");
   flex-direction: column;
 
   &.animated {
@@ -567,10 +566,6 @@ aside.quote {
     display: flex;
   }
 
-  &.fast-editing {
-    opacity: 1;
-  }
-
   .buttons {
     display: flex;
   }
@@ -599,24 +594,21 @@ aside.quote {
     }
   }
 
-  .btn,
-  .btn:hover,
-  .d-icon,
-  .btn:hover .d-icon {
-    color: var(--secondary-or-primary);
-  }
-
-  .btn-primary,
-  .btn-primary:hover,
-  .btn-primary .d-icon,
-  .btn-primary:hover .d-icon {
-    color: var(--secondary);
-  }
-
   .insert-quote + .quote-sharing {
     border-left: 1px solid rgba(255, 255, 255, 0.3);
   }
 
+  .btn-flat {
+    .d-icon {
+      color: var(--primary-high);
+    }
+    .discourse-no-touch & {
+      &:hover {
+        background-color: var(--tertiary-low);
+      }
+    }
+  }
+
   .quote-sharing {
     vertical-align: middle;
     display: inline-flex;
@@ -629,16 +621,34 @@ aside.quote {
 
     .quote-share-label {
       opacity: 1;
-      max-width: $quote-share-maxwidth;
-      transition: opacity 0.3s ease-in-out, max-width 0.3s ease-in-out,
-        padding 0.3s ease-in-out;
+      transition: opacity 0.3s ease-in-out;
     }
 
-    &:hover .quote-share-label {
-      background: transparent;
-      opacity: 0;
-      max-width: 0px;
-      padding: 6px 0px;
+    &:hover {
+      .quote-share-label {
+        background: transparent;
+        opacity: 0;
+        max-width: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      .quote-share-label + .quote-share-buttons {
+        max-width: 10em;
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+      }
+      // this psuedo element creates a transition buffer zone
+      // without it, the width change on hover can cause transition jitter
+      // the width is roughly wide enough to cover long translations of "share"
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        background: transparent;
+        height: 100%;
+        padding: 0.5em 4em;
+        z-index: -1; // below the buttons
+      }
     }
 
     .quote-share-label + .quote-share-buttons {
@@ -646,12 +656,7 @@ aside.quote {
       overflow: hidden;
       max-width: 0;
       display: inline-flex;
-      transition: opacity 0.3s ease-in-out, max-width 0.3s ease-in-out;
-    }
-
-    &:hover .quote-share-label + .quote-share-buttons {
-      max-width: $quote-share-maxwidth;
-      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
     }
   }
 }