1 files changed, 106 insertions, 0 deletions
diff --git a/ui/client-style/src/node_page.css b/ui/client-style/src/node_page.css
new file mode 100644
index 0000000..62c8c7e
--- /dev/null
+++ b/ui/client-style/src/node_page.css
@@ -0,0 +1,106 @@
+/*
+    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
+*/
+.backdrop {
+    width: calc(100% + 2 * var(--main-side-margin));
+    height: min(50vh, calc(var(--backdrop-height) + 5em));
+    margin-left: calc(-1 * var(--main-side-margin));
+    margin-right: calc(-1 * var(--main-side-margin));
+    margin-top: calc(-1 * var(--bar-height));
+    margin-bottom: -5em;
+    -webkit-mask-image: linear-gradient(
+        rgba(0, 0, 0, 1),
+        transparent min(50vh, calc(var(--backdrop-height) + 5em))
+    );
+    mask-image: linear-gradient(
+        rgba(0, 0, 0, 1),
+        transparent min(50vh, calc(var(--backdrop-height) + 5em))
+    );
+    -webkit-mask-mode: alpha;
+    mask-mode: alpha;
+    pointer-events: none;
+    object-fit: cover;
+    object-position: center;
+}
+.bigposter {
+    width: max(8em, 25%);
+    float: left;
+    margin: 3em;
+    height: 100%;
+}
+.bigposter.has_backdrop {
+    margin-top: -1em;
+}
+.bigposter img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+}
+
+.bigposter.aspect-thumb {
+    aspect-ratio: var(--land-thumb-aspect)
+}
+.bigposter.aspect-land {
+    aspect-ratio: var(--land-poster-aspect)
+}
+.bigposter.aspect-port {
+    aspect-ratio: var(--port-poster-aspect)
+}
+.bigposter.aspect-square {
+    aspect-ratio: 1;
+}
+
+.title h1 {
+    margin-right: 1em;
+}
+.title .play {
+    display: inline-block;
+    font-size: small;
+    background-color: #52b83340;
+}
+.title .play::before {
+    content: "play_arrow";
+    vertical-align: middle;
+}
+.title .mark_watched,
+.title .mark_unwatched {
+    display: inline-block;
+}
+.title .mark_watched input,
+.title .mark_unwatched input {
+    background-color: #80808040;
+}
+
+/* TODO find a non-horrible way to put the icon there */
+/*.page.node .title .mark_watched input::before {
+    content: "done_all";
+}
+.page.node .title .mark_unwatched input::before {
+    content: "undo";
+}*/
+
+.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.22s;
+}
+.dirup:hover {
+    filter: brightness(120%);
+}
+
+@media (max-width: 500px) {
+    .page.node .bigposter {
+        margin: 1.5em;
+    }
+}