Add better poster style; Add material icons

1 files changed, 18 insertions, 39 deletions

diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index a83056c..ea29b25 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -76,42 +76,12 @@
     grid-area: 1 / 1;
 }
 
-.node.card.poster .poster .cardhover.open {
-    transition: opacity 0.3s, backdrop-filter 0.3s;
-    opacity: 0;
-    display: flex;
-    position: relative;
-    bottom: 0px;
-    height: 5em;
-    margin-top: -5em;
-}
-.node.card.poster .poster:hover .cardhover.open {
-    opacity: 1;
-    background-color: var(--overlay);
-    backdrop-filter: blur(3px);
-}
-.node.card.poster .poster .cardhover.open a {
-    text-decoration: none;
-    width: 100%;
-    height: 1.7em;
-    font-size: large;
-    display: block;
-    text-align: center;
-    background-color: var(--overlay);
-    border-radius: 0.2em;
-    padding: 0.6em;
-    margin: 0.6em;
-    transition: background-color 0.2s;
-}
-.node.card.poster .poster .cardhover.open a:hover {
-    background-color: var(--overlay-hover);
-}
-
 .node.card.poster .poster .cardhover.item {
     position: relative;
     pointer-events: none;
     grid-area: 1 / 1;
-    transition: opacity 0.3s, backdrop-filter 0.3s;
+    transition: opacity 0.3s;
+    background-color: var(--overlay);
     opacity: 0;
     display: flex;
     justify-content: center;
@@ -119,27 +89,36 @@
 }
 .node.card.poster .poster:hover .cardhover.item {
     opacity: 1;
-    background-color: var(--overlay);
-    backdrop-filter: blur(3px);
+}
+
+.node.card.poster .poster a {
+    overflow: hidden;
+}
+
+.node.card.poster .poster a img {
+    transition: transform 0.3s;
+}
+
+.node.card.poster .poster:hover a img {
+    transform: scale(1.1);
 }
 
 .node.card.poster .poster .cardhover.item a.play {
     text-decoration: none;
-    font-stretch: 200%;
     width: 1em;
     height: 1em;
     line-height: 1;
     margin: auto;
-    padding: 0.4em 0.3em 0.4em 0.5em;
+    padding: 0.2em;
     border-radius: 50%;
-    font-size: 1.8em;
+    font-size: 2.2em;
     pointer-events: all;
     background-color: var(--overlay);
-    transition: background-color 0.2s, font-size 0.2s;
+    transition: background-color 0.3s, font-size 0.3s;
 }
 .node.card.poster .poster .cardhover.item a.play:hover {
     background-color: var(--overlay-hover);
-    font-size: 2.4em;
+    font-size: 3em;
 }
 .node.card.poster .poster .cardhover.item .props {
     position: absolute;