Clickable tags + Improvements.

src/styles/Filters.css

@@ -23,6 +23,11 @@
     left: 0;
     bottom: 0;
     width: 100vw;
+    z-index: 1;
+}
+
+.filter-box {
+    position: relative;
 }
 
 .filter {
@@ -35,11 +40,11 @@
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
-    top: 15%;
     position: absolute;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    z-index: 2;
 }
 
 .filter legend {

src/styles/List.css

@@ -60,7 +60,7 @@
     align-items: center;
   }
 
-  .list a {
+  .link {
     text-decoration: underline;
   }
 
@@ -106,20 +106,20 @@
   flex-direction: column;
 }
 
-.list a {
+.link {
   white-space: nowrap;
   font-family: 'Font Awesome 5 Free';
   pointer-events: all;
   font-size: 1rem;
 }
 
-.list a::after {
+.link::after {
   content: " ";
   opacity: 0%;
   transition: opacity 0.1s;
 }
 
-.list a:hover::after {
+.link:hover::after {
   opacity: 100%;
 }
 
@@ -153,12 +153,12 @@
   flex-wrap: wrap;
 }
 
-.tags div {
+.tags a {
   margin-right: 10px;
+  color: #2b8add;
 }
 
-.tags div::before {
-
+.tags a::before {
   color: rgb(42, 125, 172);
   content: "# ";
 }

src/styles/SendItem.css

@@ -14,7 +14,6 @@
     }
 }
 
-
 .add-overlay {
     animation: fadein 0.2s;
     background-color: black;
@@ -26,6 +25,10 @@
     width: 100vw;
 }
 
+.send-box {
+    position: relative;
+}
+
 .box {
     animation: fadein 0.3s;
     border: solid;
@@ -34,7 +37,6 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     position: absolute;
     z-index: 2;
-    top: 15%;
     background-color: #1f2c38;
     overflow-x: hidden;
     overflow-y: auto;

src/styles/Sort.css

@@ -1,7 +1,7 @@
 @media (min-width: 800px) {
     .sort {
-        left: 35%;
-        right: 35%;
+        left: 30%;
+        right: 30%;
         min-width: 200px;
     }
 }
@@ -23,6 +23,11 @@
     left: 0;
     bottom: 0;
     width: 100vw;
+    z-index: 1;
+}
+
+.sort-box {
+    position: relative;
 }
 
 .sort {
@@ -35,11 +40,11 @@
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
-    top: 15%;
     position: absolute;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    z-index: 2;
 }
 
 .sort legend {

src/styles/index.css

@@ -58,7 +58,7 @@ body {
   color: darkgray;
 }
 
-.list a {
+.link {
   color: rgb(194, 193, 193);
 }
 
@@ -130,7 +130,7 @@ body {
   color: rgb(105, 105, 105);
 }
 
-.light .list a {
+.light .link {
   color: rgb(102, 102, 102);
 }