1 files changed, 147 insertions, 0 deletions
diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css
new file mode 100644
index 0000000..fea2a10
--- /dev/null
+++ b/server/src/routes/ui/style/nodecard.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) 2023 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+.children {
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+}
+.children li {
+    display: block;
+}
+
+.dirup {
+    width: 100%;
+    font-size: large;
+    display: block;
+    text-align: center;
+    background-color: var(--background-light);
+    border-radius: 0.2em;
+    padding: 0.6em;
+    margin: 0.2em;
+    transition: filter 0.2s;
+}
+.dirup:hover {
+    filter: brightness(120%);
+}
+
+.card {
+    padding: 1em;
+    height: var(--card-size);
+}
+.card.poster.poster-port {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+}
+.card.poster.poster-land {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+}
+.card.poster.thumb-land {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+}
+.card.poster.poster-square {
+    width: calc(var(--card-size));
+}
+
+.card .title {
+    margin-top: 0.1em;
+    text-align: center;
+    text-overflow: ellipsis;
+}
+.card .banner {
+    display: grid;
+}
+.card .banner a {
+    grid-area: 1 / 1;
+}
+
+.card.poster.poster-port .banner img {
+    width: calc(var(--card-size) / var(--port-poster-aspect));
+    height: var(--card-size);
+}
+.card.poster.poster-land .banner img {
+    width: calc(var(--card-size) / var(--land-poster-aspect));
+    height: var(--card-size);
+}
+.card.poster.thumb-land .banner img {
+    width: calc(var(--card-size) / var(--land-thumb-aspect));
+    height: var(--card-size);
+}
+.card.poster.poster-square .banner img {
+    width: calc(var(--card-size));
+    height: var(--card-size);
+}
+.card .banner a img {
+    object-fit: cover;
+    object-position: center;
+}
+
+
+.card.poster .banner .hoverdir {
+    transition: opacity 0.3s, backdrop-filter 0.3s;
+    opacity: 0;
+    display: flex;
+    position: relative;
+    bottom: 0px;
+    height: 5em;
+    margin-top: -5em;
+}
+.card.poster .banner:hover .hoverdir {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+.card.poster .banner .hoverdir 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.poster .banner .hoverdir a:hover {
+    background-color: #0008;
+}
+
+.card.poster .banner .hoveritem {
+    pointer-events: none;
+    grid-area: 1 / 1;
+    transition: opacity 0.3s, backdrop-filter 0.3s;
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card.poster .banner:hover .hoveritem {
+    opacity: 1;
+    background-color: #0004;
+    backdrop-filter: blur(3px);
+}
+.card.poster .banner .hoveritem a {
+    text-decoration: none;
+    font-stretch: 200%;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    margin: auto;
+    padding: 0.4em 0.3em 0.4em 0.5em;
+    border-radius: 50%;
+    font-size: 1.8em;
+    pointer-events: all;
+    background-color: #0005;
+    transition: background-color 0.2s, font-size 0.2s;
+}
+.card.poster .banner .hoveritem a:hover {
+    background-color: #0008;
+    font-size: 2.4em;
+}