Improve the list selection UI for notification requests (#31457)

app/javascript/styles/mastodon-light/variables.scss

@@ -65,4 +65,5 @@ body {
   --background-color: #fff;
   --background-color-tint: rgba(255, 255, 255, 80%);
   --background-filter: blur(10px);
+  --on-surface-color: #{transparentize($ui-base-color, 0.65)};
 }

app/javascript/styles/mastodon/components.scss

@@ -4217,7 +4217,7 @@ a.status-card {
   text-decoration: none;
 
   &:hover {
-    background: lighten($ui-base-color, 2%);
+    background: var(--on-surface-color);
   }
 }
 
@@ -4346,19 +4346,18 @@ a.status-card {
     display: flex;
   }
 
-  &__selection-mode {
-    flex-grow: 1;
-
-    .text-btn:hover {
-      text-decoration: underline;
-    }
+  &__select-menu:disabled {
+    visibility: hidden;
   }
 
-  &__actions {
-    .icon-button {
-      border-radius: 4px;
-      border: 1px solid var(--background-border-color);
-      padding: 5px;
+  &__mode-button {
+    margin-left: auto;
+    color: $highlight-text-color;
+    font-weight: bold;
+    font-size: 14px;
+
+    &:hover {
+      color: lighten($highlight-text-color, 6%);
     }
   }
 }
@@ -4566,6 +4565,7 @@ a.status-card {
   padding: 0;
   font-family: inherit;
   font-size: inherit;
+  font-weight: inherit;
   color: inherit;
   border: 0;
   background: transparent;
@@ -10366,7 +10366,7 @@ noscript {
     cursor: pointer;
 
     &:hover {
-      background: lighten($ui-base-color, 1%);
+      background: var(--on-surface-color);
     }
 
     .notification-request__checkbox {

app/javascript/styles/mastodon/variables.scss

@@ -109,5 +109,6 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-background-color: #{darken($ui-base-color, 4%)};
   --surface-variant-background-color: #{$ui-base-color};
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --on-surface-color: #{transparentize($ui-base-color, 0.5)};
   --avatar-border-radius: 8px;
 }