Remove conflicting CSS rules on notifications, improve notifications table (#23565)

Dropdowns on `/notifications/subscriptions` before and after:

<img width="157" alt="Screenshot 2023-03-18 at 20 37 12"
src="https://user-images.githubusercontent.com/115237/226133906-e4ad6a0a-de24-4324-8e1d-94081d23fe85.png">
<img width="152" alt="Screenshot 2023-03-18 at 20 41 29"
src="https://user-images.githubusercontent.com/115237/226134038-c3946c32-a424-4b92-ad15-890e1036cafe.png">

These selectors are meant to target the notification list which I
improved:

<img width="1145" alt="Screenshot 2023-03-19 at 01 52 11"
src="https://user-images.githubusercontent.com/115237/226147907-1c35736a-4bc9-4698-9813-21a20a1d2106.png">
<img width="1148" alt="Screenshot 2023-03-19 at 01 54 17"
src="https://user-images.githubusercontent.com/115237/226147920-626dbd84-11d3-48db-a177-6d808e3212c0.png">

1 files changed, 9 insertions, 21 deletions

diff --git a/web_src/css/user.css b/web_src/css/user.css
index a3379440df..8722181c29 100644
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -90,27 +90,6 @@
   padding: 8px 15px;
 }
 
-.user.notification .svg {
-  float: left;
-  font-size: 2em;
-}
-
-.user.notification .svg.green {
-  color: var(--color-green);
-}
-
-.user.notification .svg.red {
-  color: var(--color-red);
-}
-
-.user.notification .svg.purple {
-  color: var(--color-purple);
-}
-
-.user.notification .svg.blue {
-  color: var(--color-blue);
-}
-
 .user.notification .content {
   float: left;
   margin-left: 7px;
@@ -175,4 +154,13 @@
 
 #notification_div .tab.segment {
   overflow-x: auto;
+  padding: 0;
+}
+
+#notification_div .menu .active.item {
+  background: var(--color-box-body);
+}
+
+#notification_table {
+  border: none;
 }