s

2 files changed, 18 insertions, 11 deletions

diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css
index 54bdcfe..ae6b707 100644
--- a/server/src/routes/ui/style/nodecard.css
+++ b/server/src/routes/ui/style/nodecard.css
@@ -26,7 +26,7 @@
     border-radius: 0.2em;
     padding: 0.6em;
     margin: 0.2em;
-    transition: filter 0.2s;
+    transition: filter 0.22s;
 }
 .dirup:hover {
     filter: brightness(120%);
@@ -82,8 +82,7 @@
     object-position: center;
 }
 
-
-.node.card.poster .poster .hoverdir {
+.node.card.poster .poster .cardhover.open {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
     display: flex;
@@ -92,12 +91,12 @@
     height: 5em;
     margin-top: -5em;
 }
-.node.card.poster .poster:hover .hoverdir {
+.node.card.poster .poster:hover .cardhover.open {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.node.card.poster .poster .hoverdir a {
+.node.card.poster .poster .cardhover.open a {
     text-decoration: none;
     width: 100%;
     height: 1.7em;
@@ -110,11 +109,12 @@
     margin: 0.6em;
     transition: background-color 0.2s;
 }
-.node.card.poster .poster .hoverdir a:hover {
+.node.card.poster .poster .cardhover.open a:hover {
     background-color: #0008;
 }
 
-.node.card.poster .poster .hoveritem {
+.node.card.poster .poster .cardhover.item {
+    position: relative;
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -123,12 +123,13 @@
     justify-content: center;
     align-items: center;
 }
-.node.card.poster .poster:hover .hoveritem {
+.node.card.poster .poster:hover .cardhover.item {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.node.card.poster .poster .hoveritem a {
+
+.node.card.poster .poster .cardhover.item a.play {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -142,7 +143,12 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.node.card.poster .poster .hoveritem a:hover {
+.node.card.poster .poster .cardhover.item a.play:hover {
     background-color: #0008;
     font-size: 2.4em;
 }
+.node.card.poster .poster .cardhover.item .props {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+}
diff --git a/server/src/routes/ui/style/nodepage.css b/server/src/routes/ui/style/nodepage.css
index 21d7754..2590b74 100644
--- a/server/src/routes/ui/style/nodepage.css
+++ b/server/src/routes/ui/style/nodepage.css
@@ -60,5 +60,6 @@
     font-weight: bolder;
     display: inline-block;
     padding: 0.2em;
-    background: #ffffff15;
+    background: #5a5a5a85;
+    border-radius: 4px;
 }