From a940ba2b521ba6384c9491baa1e3b4ebdb8c128b Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Mon, 8 Jul 2024 21:40:34 +0200
Subject: [PATCH] Fix upvote button styling

---
 src/main/resources/static/buttons.css |  7 +++++--
 src/main/resources/static/details.css |  7 +------
 src/main/resources/static/main.css    | 12 +++++++++---
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/static/buttons.css b/src/main/resources/static/buttons.css
index a01cbd8..5126e70 100644
--- a/src/main/resources/static/buttons.css
+++ b/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);
diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css
index 738ed30..d8a77d1 100644
--- a/src/main/resources/static/details.css
+++ b/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 {
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index e755baf..32336f5 100644
--- a/src/main/resources/static/main.css
+++ b/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 * {