Fix upvote button styling

src/main/resources/static/buttons.css

@@ -18,6 +18,7 @@
     --transition-duration-outline: var(--transition-duration-medium);
     transition:
         background-color ease-out var(--transition-duration-bg-color),
+        background-blend-mode ease-out var(--transition-duration-bg-color),
         filter ease-out var(--transition-duration-filter),
         outline ease-in var(--transition-duration-outline);
 
@@ -63,7 +64,7 @@
     }
 
     &.destructive:not(.suggested) {
-        --btn-color: #861c1c;
+        --btn-color: var(--color-destructive);
     }
 
     &:focus-visible {
@@ -72,8 +73,10 @@
 
     &.icon {
         --text-color: transparent;
-        background: var(--icon-url) no-repeat;
+        background-image: var(--icon-url);
+        background-repeat: no-repeat;
         background-size: contain;
+        mask: var(--icon-url) center / contain no-repeat;
         overflow: hidden;
         width: var(--icon-size, 1rem);
         height: var(--icon-size, 1rem);

src/main/resources/static/details.css

@@ -124,12 +124,7 @@ h1 {
 
 a {
     --text-color: var(--accent-color);
-
-    /*
-        Why doesn't it do this automatically? It is inherited from body,
-        so I should be able to just change --text-color, right?
-    */
-    color: var(--text-color); 
+    color: var(--text-color);
 }
 
 .upvote {

src/main/resources/static/main.css

@@ -5,6 +5,7 @@
     --fg-color: #555;
     --text-color: #dbdbdb;
     --accent-color: oklch(65.33% 0.158 247.76);
+    --color-destructive: red;
     --pad-datasets-block: 1rem;
     --pad-datasets-inline: 2rem;
     --gap-large: 1.5rem;
@@ -15,7 +16,7 @@
     --corner-radius: 1rem;
     font-size: 12pt;
     font-family: sans-serif;
-    scrollbar-gutter: stable both-edges;
+    scrollbar-gutter: stable;
     scrollbar-color: var(--fg-color) var(--bg-color);
 }
 
@@ -148,7 +149,7 @@ header {
     --icon-size: 2rem;
 
     &:disabled {
-        --brightness: 1.75;
+        --brightness: 2;
     }
 }
 
@@ -166,6 +167,11 @@ header {
 
 #reset-tools-btn {
     --icon-url: url(reset.svg);
+
+    &:hover {
+        --btn-color: var(--color-destructive);
+        background-blend-mode: screen;
+    }
 }
 
 #sort-btn {
@@ -179,7 +185,7 @@ header {
 }
 
 :is(.upvote-btn, .downvote-btn).isVoted {
-    --brightness: 1.1;
+    --brightness: 1.5;
 }
 
 select * {