1 files changed, 50 insertions, 0 deletions
diff --git a/server/src/routes/ui/style/itempage.css b/server/src/routes/ui/style/itempage.css
new file mode 100644
index 0000000..284d74f
--- /dev/null
+++ b/server/src/routes/ui/style/itempage.css
@@ -0,0 +1,50 @@
+
+.backdrop {
+    width: calc(100% + 2 * var(--main-side-margin));
+    height: 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 calc(var(--backdrop-height) + 5em)
+    );
+    mask-image: linear-gradient(
+        rgba(0, 0, 0, 1),
+        transparent calc(var(--backdrop-height) + 5em)
+    );
+    -webkit-mask-mode: alpha;
+    mask-mode: alpha;
+    pointer-events: none;
+    object-fit: cover;
+    object-position: center;
+}
+.page.item {
+    position: relative;
+    width: 100%;
+}
+.page.item .banner {
+    width: max(8em, 20%);
+    float: left;
+    margin: 3em;
+    margin-top: -1em;
+}
+.page.item .banner img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.page.item .title h1 {
+    display: inline;
+    margin-right: 1em;
+}
+.page.item .title .play {
+    display: inline;
+    font-stretch: 200%;
+}
+.page.item .title .play::before {
+    content: "▶";
+}