diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb
index 701a1c40f..a0271f8be 100644
--- a/app/components/comment_component/comment_component.html.erb
+++ b/app/components/comment_component/comment_component.html.erb
@@ -47,21 +47,21 @@
<% if votable? %>
<% end %>
diff --git a/app/components/comment_component/comment_component.scss b/app/components/comment_component/comment_component.scss
index a685f355b..d50b8ca61 100644
--- a/app/components/comment_component/comment_component.scss
+++ b/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 {
- color: var(--muted-text-color);
+ // Fix it so that the vote buttons don't move when the score changes width.
+ .comment-score {
+ display: inline-block;
+ text-align: center;
+ min-width: 1.25em;
+ white-space: nowrap;
+ }
- &:hover {
- color: var(--link-color);
- }
+ .icon {
+ width: 1.25em;
}
}
diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss
index 03460647b..6dce7d5fd 100644
--- a/app/components/popup_menu_component/popup_menu_component.scss
+++ b/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 {
- color: var(--link-color);
- background-color: var(--subnav-menu-background-color);
+ // the popup menu is open
+ &[aria-expanded="true"] {
+ @extend .active-link;
+ }
+
+ // the popup menu is not open
+ &:not([aria-expanded="true"]) {
+ @extend .inactive-link;
}
}
ul.popup-menu-content {
display: none;
- li {
- margin: 0 2em 0.25em 0;
+ li a {
+ display: block;
+ padding: 0.125em 2em 0.125em 0;
i.icon {
- width: 2em;
+ width: 1.5em;
}
}
}
diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss
index 34b709cf6..faa94c2a0 100644
--- a/app/javascript/src/styles/base/030_links.scss
+++ b/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;
}
diff --git a/app/javascript/src/styles/specific/user_tooltips.scss b/app/javascript/src/styles/specific/user_tooltips.scss
index b07cd6abc..ce96b60f7 100644
--- a/app/javascript/src/styles/specific/user_tooltips.scss
+++ b/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;
}