fancy folders

1 files changed, 37 insertions, 4 deletions

diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css
index 083d1b1..e81dce7 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/directorypage.css
@@ -68,7 +68,40 @@
     object-fit: cover;
     object-position: center;
 }
-.card .banner .hover {
+
+
+.card.dir .banner .hover {
+    transition: opacity 0.3s, backdrop-filter 0.3s;
+    opacity: 0;
+    display: flex;
+    position: relative;
+    bottom: 0px;
+    height: 5em;
+    margin-top: -5em;
+}
+.card.dir .banner:hover .hover {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+.card.dir .banner .hover a {
+    text-decoration: none;
+    width: 100%;
+    height: 1.7em;
+    font-size: large;
+    display: block;
+    text-align: center;
+    background-color: #0004;
+    border-radius: 0.2em;
+    padding: 0.6em;
+    margin: 0.6em;
+    transition: background-color 0.2s;
+}
+.card.dir .banner .hover a:hover {
+    background-color: #0008;
+}
+
+.card.item .banner .hover {
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -77,12 +110,12 @@
     justify-content: center;
     align-items: center;
 }
-.card .banner:hover .hover {
+.card.item .banner:hover .hover {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card .banner .hover a {
+.card.item .banner .hover a {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -96,7 +129,7 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.card .banner .hover a:hover {
+.card.item .banner .hover a:hover {
     background-color: #0008;
     font-size: 2.4em;
 }