Add better poster style; Add material icons

5 files changed, 42 insertions, 54 deletions

diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index bb97146..c95f8eb 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -87,14 +87,9 @@ markup::define! {
                 a[href=uri!(r_library_node(id))] {
                     img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(1024)))];
                 }
-                @if matches!(node.kind, NodeKind::Collection | NodeKind::Channel) {
-                    .cardhover.open {
-                        a[href=&uri!(r_library_node(id))] { "Open" }
-                        @Props { node }
-                    }
-                } else {
+                @if !(matches!(node.kind, NodeKind::Collection | NodeKind::Channel)) {
                     .cardhover.item {
-                        a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "▶" }
+                        a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "play_arrow" }
                         @Props { node }
                     }
                 }
diff --git a/web/style/layout.css b/web/style/layout.css
index 20896b0..1369cf5 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -9,6 +9,14 @@
     src: url(/assets/cantarell.woff2) format("woff2");
 }
 
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url("/assets/fonts/material-icons.woff2") format("woff2");
+}
+
 :root {
     --card-size: 17em;
     --bar-height: 5em;
@@ -74,21 +82,17 @@ nav a {
     border-radius: 5px;
     padding: 0.5em;
     text-decoration: none;
-}
-nav a:hover {
-    background-color: var(--c-nav-hover);
-}
-nav a {
     color: var(--font);
-    text-decoration: none;
     background-image: linear-gradient(transparent, transparent),
         linear-gradient(var(--accent-light), var(--accent-light));
     background-size: 100% 2px, 0 2px;
     background-position: 100% 100%, 0 100%;
     background-repeat: no-repeat;
     transition: background-size 0.15s linear;
+    cursor: pointer;
 }
 nav a:hover {
+    background-color: var(--c-nav-hover);
     background-size: 0 2px, 100% 2px;
 }
 
@@ -138,3 +142,12 @@ footer p {
     color: var(--font-dark);
     font-size: 0.8em;
 }
+
+.material-icons, .cardhover.item .play, .page.node .title .play::before {
+    content: "face";
+    font-family: "Material Icons";
+    line-height: 1;
+    display: inline-block;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+}
\ No newline at end of file
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;
diff --git a/web/style/nodepage.css b/web/style/nodepage.css
index 2df7c13..e1bf363 100644
--- a/web/style/nodepage.css
+++ b/web/style/nodepage.css
@@ -51,7 +51,8 @@
     font-stretch: 200%;
 }
 .page.node .title .play::before {
-    content: "▶";
+    content: "play_arrow";
+    vertical-align: middle;
 }
 
 .props p {
diff --git a/web/style/themes.css b/web/style/themes.css
index b95332e..04f0278 100644
--- a/web/style/themes.css
+++ b/web/style/themes.css
@@ -10,7 +10,7 @@ body.theme-Dark {
     --c-nav: #1c1c1c9a;
     --c-nav-hover: #ffffff10;
     --c-fade: black;
-    --overlay: #0004;
+    --overlay: #0005;
     --overlay-hover: #0008;
     --background-dark: #070707;
     --background-light: #1c1c1c;