1 files changed, 147 insertions, 0 deletions
diff --git a/ui/client-style/src/node_card.css b/ui/client-style/src/node_card.css
new file mode 100644
index 0000000..2c0b97f
--- /dev/null
+++ b/ui/client-style/src/node_card.css
@@ -0,0 +1,147 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+
+.poster * img, .bigposter img {
+    background-color: var(--image-loading-placeholder);
+}
+.poster a, .bigposter img {
+    border-radius: 1em;
+}
+
+.card {
+    padding: 1em;
+}
+
+.card .poster,
+.card .poster img {
+    height: var(--card-size);
+}
+.aspect-port {
+    width: calc(var(--card-size) * var(--port-poster-aspect));
+}
+.aspect-land {
+    width: calc(var(--card-size) * var(--land-poster-aspect));
+}
+.aspect-thumb {
+    width: calc(var(--card-size) * var(--land-thumb-aspect));
+}
+.aspect-square {
+    width: calc(var(--card-size));
+}
+
+.card .poster a img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}
+.card .title, .card .subtitle {
+    text-align: center;
+    margin-top: 0.5em;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.card .subtitle {
+    margin-top: 0.25em;
+}
+.card .subtitle * {
+    color: var(--font-dark);
+}
+.card .title a, .card .subtitle a {
+    text-decoration-line: none;
+}
+.card .title a:hover {
+    text-decoration-line: underline;
+}
+.card .title .subtitle {
+    color: grey;
+}
+.card .poster {
+    display: grid;
+}
+.card .poster a {
+    grid-area: 1 / 1;
+}
+
+.card .poster .cardhover {
+    position: relative;
+    pointer-events: none;
+    grid-area: 1 / 1;
+    transition: opacity 0.3s;
+    background-color: var(--overlay-poster);
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card .poster:hover .cardhover {
+    opacity: 1;
+}
+
+.card .poster a {
+    overflow: hidden;
+}
+
+.card .poster a img {
+    transition: transform 0.3s;
+}
+
+.card .poster:hover a img {
+    transform: scale(1.1);
+}
+
+.card .poster .cardhover a.play {
+    text-decoration: none;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    margin: auto;
+    padding: 0.2em;
+    border-radius: 50%;
+    font-size: 2.2em;
+    pointer-events: all;
+    background-color: var(--overlay);
+    transition: background-color 0.3s, font-size 0.3s;
+}
+.card .poster .cardhover a.play:hover {
+    background-color: var(--overlay-hover);
+    font-size: 3em;
+}
+.card .poster .cardhover .props {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+}
+
+.widecard {
+    display: grid;
+    grid-template-columns: 1fr 10000fr;
+    width: 100%;
+}
+.widecard .poster {
+    grid-column: 1;
+}
+.widecard .details {
+    grid-column: 2;
+    margin: 1em;
+}
+.widecard .details .title {
+    font-size: large;
+}
+.widecard .details .props {
+    margin-bottom: 0.5em;
+}
+
+@media (max-width: 750px) {
+    nav .library {
+        display: none;
+    }
+    .children {
+        justify-content: center;
+    }
+}