show series as poster

1 files changed, 12 insertions, 12 deletions

diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css
index e81dce7..0d18c82 100644
--- a/server/src/routes/ui/style/directorypage.css
+++ b/server/src/routes/ui/style/directorypage.css
@@ -37,10 +37,10 @@
     padding: 1em;
     height: var(--card-size);
 }
-.card.item {
+.card.poster {
     width: calc(var(--card-size) / var(--item-banner-aspect));
 }
-.card.dir {
+.card.poster.wide {
     width: calc(var(--card-size) / var(--dir-banner-aspect));
 }
 
@@ -56,11 +56,11 @@
     grid-area: 1 / 1;
 }
 
-.card.item .banner img {
+.card.poster .banner img {
     width: calc(var(--card-size) / var(--item-banner-aspect));
     height: var(--card-size);
 }
-.card.dir .banner img {
+.card.poster.wide .banner img {
     width: calc(var(--card-size) / var(--dir-banner-aspect));
     height: var(--card-size);
 }
@@ -70,7 +70,7 @@
 }
 
 
-.card.dir .banner .hover {
+.card.poster .banner .hoverdir {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
     display: flex;
@@ -79,12 +79,12 @@
     height: 5em;
     margin-top: -5em;
 }
-.card.dir .banner:hover .hover {
+.card.poster .banner:hover .hoverdir {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.dir .banner .hover a {
+.card.poster .banner .hoverdir a {
     text-decoration: none;
     width: 100%;
     height: 1.7em;
@@ -97,11 +97,11 @@
     margin: 0.6em;
     transition: background-color 0.2s;
 }
-.card.dir .banner .hover a:hover {
+.card.poster .banner .hoverdir a:hover {
     background-color: #0008;
 }
 
-.card.item .banner .hover {
+.card.poster .banner .hoveritem {
     pointer-events: none;
     grid-area: 1 / 1;
     transition: opacity 0.3s, backdrop-filter 0.3s;
@@ -110,12 +110,12 @@
     justify-content: center;
     align-items: center;
 }
-.card.item .banner:hover .hover {
+.card.poster .banner:hover .hoveritem {
     opacity: 1;
     background-color: #0004;
     backdrop-filter: blur(3px);
 }
-.card.item .banner .hover a {
+.card.poster .banner .hoveritem a {
     text-decoration: none;
     font-stretch: 200%;
     width: 1em;
@@ -129,7 +129,7 @@
     background-color: #0005;
     transition: background-color 0.2s, font-size 0.2s;
 }
-.card.item .banner .hover a:hover {
+.card.poster .banner .hoveritem a:hover {
     background-color: #0008;
     font-size: 2.4em;
 }