style/note cards: improve style, remove no longer unused CSS variables

Author: adoriandoran

apps/client/src/stylesheets/theme-next-dark.css

@@ -230,8 +230,7 @@
     --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
 
     --card-background-color: #ffffff12;
-    --card-background-hover-color: #3c3c3c;
-    --card-background-press-color: #464646;
+    --card-background-hover-color: #ffffff20;
     --card-border-color: transparent;
     --card-box-shadow: none;
 

apps/client/src/stylesheets/theme-next-light.css

@@ -229,8 +229,7 @@
     --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
 
     --card-background-color: #0000000d;
-    --card-background-hover-color: #f9f9f9;
-    --card-background-press-color: #efefef;
+    --card-background-hover-color: #0000001c;
     --card-border-color: transparent;
     --card-shadow-color: rgba(0, 0, 0, 0.1);
     --card-box-shadow: none;

apps/client/src/stylesheets/theme-next/base.css

@@ -494,6 +494,15 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin: 5px 10px 5px 0;
 }
 
+:root .note-list .note-book-card:hover {
+    background-color: var(--card-background-hover-color);
+    transition: background-color 200ms ease-out;
+}
+
+:root .note-list .note-book-card:active {
+    transform: scale(.98);
+}
+
 .note-list.list-view .note-book-card {
     box-shadow: 0 0 3px var(--card-shadow-color);
 }
@@ -502,10 +511,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     vertical-align: middle;
 }
 
-.note-list-wrapper .note-book-card:active {
-    background-color: var(--card-background-press-color);
-}
-
 .note-list-wrapper .note-book-card a {
     color: inherit !important;
 }
@@ -587,7 +592,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 }
 
 .note-list.grid-view .note-book-card:hover {
-    background: var(--card-background-color) !important;
     filter: contrast(105%);
 }
 

apps/client/src/stylesheets/theme-next/pages.css

@@ -101,7 +101,7 @@
 .sql-table-schemas-widget .sql-table-schemas button:hover,
 .sql-table-schemas-widget .sql-table-schemas button:active,
 .sql-table-schemas-widget .sql-table-schemas button:focus-visible {
-    --background: var(--card-background-press-color);
+    --background: var(--card-background-hover-color);
     --color: var(--main-text-color);
 }