diff options
Diffstat (limited to 'server/src/routes/ui/style/nodecard.css')
-rw-r--r-- | server/src/routes/ui/style/nodecard.css | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css index 53ee10e..e6d8a29 100644 --- a/server/src/routes/ui/style/nodecard.css +++ b/server/src/routes/ui/style/nodecard.css @@ -53,36 +53,36 @@ text-align: center; text-overflow: ellipsis; } -.node.card .banner { +.node.card .poster { display: grid; } -.node.card .banner a { +.node.card .poster a { grid-area: 1 / 1; } -.node.card.poster.poster-port .banner img { +.node.card.poster.poster-port .poster img { width: calc(var(--card-size) / var(--port-poster-aspect)); height: var(--card-size); } -.node.card.poster.poster-land .banner img { +.node.card.poster.poster-land .poster img { width: calc(var(--card-size) / var(--land-poster-aspect)); height: var(--card-size); } -.node.card.poster.thumb-land .banner img { +.node.card.poster.thumb-land .poster img { width: calc(var(--card-size) / var(--land-thumb-aspect)); height: var(--card-size); } -.node.card.poster.poster-square .banner img { +.node.card.poster.poster-square .poster img { width: calc(var(--card-size)); height: var(--card-size); } -.node.card .banner a img { +.node.card .poster a img { object-fit: cover; object-position: center; } -.node.card.poster .banner .hoverdir { +.node.card.poster .poster .hoverdir { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; display: flex; @@ -91,12 +91,12 @@ height: 5em; margin-top: -5em; } -.node.card.poster .banner:hover .hoverdir { +.node.card.poster .poster:hover .hoverdir { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .banner .hoverdir a { +.node.card.poster .poster .hoverdir a { text-decoration: none; width: 100%; height: 1.7em; @@ -109,11 +109,11 @@ margin: 0.6em; transition: background-color 0.2s; } -.node.card.poster .banner .hoverdir a:hover { +.node.card.poster .poster .hoverdir a:hover { background-color: #0008; } -.node.card.poster .banner .hoveritem { +.node.card.poster .poster .hoveritem { pointer-events: none; grid-area: 1 / 1; transition: opacity 0.3s, backdrop-filter 0.3s; @@ -122,12 +122,12 @@ justify-content: center; align-items: center; } -.node.card.poster .banner:hover .hoveritem { +.node.card.poster .poster:hover .hoveritem { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .banner .hoveritem a { +.node.card.poster .poster .hoveritem a { text-decoration: none; font-stretch: 200%; width: 1em; @@ -141,7 +141,7 @@ background-color: #0005; transition: background-color 0.2s, font-size 0.2s; } -.node.card.poster .banner .hoveritem a:hover { +.node.card.poster .poster .hoveritem a:hover { background-color: #0008; font-size: 2.4em; } |