diff options
Diffstat (limited to 'server/src/routes/ui/style/nodecard.css')
| -rw-r--r-- | server/src/routes/ui/style/nodecard.css | 42 |
1 files changed, 21 insertions, 21 deletions
diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css index fea2a10..53ee10e 100644 --- a/server/src/routes/ui/style/nodecard.css +++ b/server/src/routes/ui/style/nodecard.css @@ -31,58 +31,58 @@ filter: brightness(120%); } -.card { +.node.card { padding: 1em; height: var(--card-size); } -.card.poster.poster-port { +.node.card.poster.poster-port { width: calc(var(--card-size) / var(--port-poster-aspect)); } -.card.poster.poster-land { +.node.card.poster.poster-land { width: calc(var(--card-size) / var(--land-poster-aspect)); } -.card.poster.thumb-land { +.node.card.poster.thumb-land { width: calc(var(--card-size) / var(--land-thumb-aspect)); } -.card.poster.poster-square { +.node.card.poster.poster-square { width: calc(var(--card-size)); } -.card .title { +.node.card .title { margin-top: 0.1em; text-align: center; text-overflow: ellipsis; } -.card .banner { +.node.card .banner { display: grid; } -.card .banner a { +.node.card .banner a { grid-area: 1 / 1; } -.card.poster.poster-port .banner img { +.node.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 { +.node.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 { +.node.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 { +.node.card.poster.poster-square .banner img { width: calc(var(--card-size)); height: var(--card-size); } -.card .banner a img { +.node.card .banner a img { object-fit: cover; object-position: center; } -.card.poster .banner .hoverdir { +.node.card.poster .banner .hoverdir { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; display: flex; @@ -91,12 +91,12 @@ height: 5em; margin-top: -5em; } -.card.poster .banner:hover .hoverdir { +.node.card.poster .banner:hover .hoverdir { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.card.poster .banner .hoverdir a { +.node.card.poster .banner .hoverdir a { text-decoration: none; width: 100%; height: 1.7em; @@ -109,11 +109,11 @@ margin: 0.6em; transition: background-color 0.2s; } -.card.poster .banner .hoverdir a:hover { +.node.card.poster .banner .hoverdir a:hover { background-color: #0008; } -.card.poster .banner .hoveritem { +.node.card.poster .banner .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; } -.card.poster .banner:hover .hoveritem { +.node.card.poster .banner:hover .hoveritem { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.card.poster .banner .hoveritem a { +.node.card.poster .banner .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; } -.card.poster .banner .hoveritem a:hover { +.node.card.poster .banner .hoveritem a:hover { background-color: #0008; font-size: 2.4em; } |