comments: tweak styling of vote buttons.

* Tweak hover colors for vote buttons.
* Tweak sizes to avoid the vote buttons shifting when the score changes.

app/components/comment_component/comment_component.html.erb

@@ -47,21 +47,21 @@
       <% if votable? %>
         <li class="comment-votes">
           <% if current_user.is_anonymous? %>
-            <%= link_to upvote_icon, login_path(url: request.fullpath), class: "comment-upvote-link" %>
+            <%= link_to upvote_icon, login_path(url: request.fullpath), class: "comment-upvote-link inactive-link" %>
           <% elsif upvoted? %>
-            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link", method: :delete, remote: true %>
+            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link active-link", method: :delete, remote: true %>
           <% else %>
-            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link", method: :post, remote: true %>
+            <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link inactive-link", method: :post, remote: true %>
           <% end %>
 
           <span class="comment-score"><%= comment.score %></span>
 
           <% if current_user.is_anonymous? %>
-            <%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link" %>
+            <%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link inactive-link" %>
           <% elsif downvoted? %>
-            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link", method: :delete, remote: true %>
+            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link active-link", method: :delete, remote: true %>
           <% else %>
-            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
+            <%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link inactive-link", method: :post, remote: true %>
           <% end %>
         </li>
       <% end %>

app/components/comment_component/comment_component.scss

@@ -9,18 +9,6 @@ article.comment {
     background-color: var(--moderation-report-background-color);
   }
 
-  &[data-is-upvoted="true"] {
-    a.comment-upvote-link {
-      color: var(--link-color);
-    }
-  }
-
-  &[data-is-downvoted="true"] {
-    a.comment-downvote-link {
-      color: var(--link-color);
-    }
-  }
-
   &[data-is-dimmed="true"] {
     opacity: 0.3;
 
@@ -42,12 +30,16 @@ article.comment {
   .comment-votes {
     color: var(--muted-text-color);
 
-    a {
+    // Fix it so that the vote buttons don't move when the score changes width.
-      color: var(--muted-text-color);
+    .comment-score {
+      display: inline-block;
+      text-align: center;
+      min-width: 1.25em;
+      white-space: nowrap;
+    }
 
-      &:hover {
+    .icon {
-        color: var(--link-color);
+      width: 1.25em;
-      }
     }
   }
 

app/components/popup_menu_component/popup_menu_component.scss

@@ -1,3 +1,5 @@
+@import "../../javascript/src/styles/base/030_links.scss";
+
 div.popup-menu {
   display: inline-block;
 
@@ -10,20 +12,26 @@ div.popup-menu {
     border-radius: 50%;
     color: var(--muted-text-color);
 
-    &:focus, &:hover {
+    // the popup menu is open
-      color: var(--link-color);
+    &[aria-expanded="true"] {
-      background-color: var(--subnav-menu-background-color);
+      @extend .active-link;
+    }
+
+    // the popup menu is not open
+    &:not([aria-expanded="true"]) {
+      @extend .inactive-link;
     }
   }
 
   ul.popup-menu-content {
     display: none;
 
-    li {
+    li a {
-      margin: 0 2em 0.25em 0;
+      display: block;
+      padding: 0.125em 2em 0.125em 0;
 
       i.icon {
-        width: 2em;
+        width: 1.5em;
       }
     }
   }

app/javascript/src/styles/base/030_links.scss

@@ -22,6 +22,23 @@ a.active {
   font-weight: bold;
 }
 
+a.active-link {
+  color: var(--link-color);
+
+  &:hover {
+    background-color: var(--subnav-menu-background-color);
+  }
+}
+
+a.inactive-link {
+  color: var(--muted-text-color);
+
+  &:hover {
+    color: var(--link-hover-color);
+    background-color: var(--subnav-menu-background-color);
+  }
+}
+
 a[rel*="external"] {
   word-break: break-all;
 }

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

@@ -55,6 +55,10 @@
       grid-area: header-bottom;
       color: var(--muted-text-color);
       font-size: 0.75em;
+
+      a {
+        color: var(--muted-text-color);
+      }
     }
 
     div.popup-menu {
@@ -74,6 +78,10 @@
     .user-tooltip-stat-item {
       text-align: center;
 
+      a {
+        color: var(--text-color);
+      }
+
       .user-tooltip-stat-value {
         font-weight: bold;
       }