diff options
Diffstat (limited to 'web/style')
-rw-r--r-- | web/style/layout.css | 8 | ||||
-rw-r--r-- | web/style/nodecard.css | 44 |
2 files changed, 26 insertions, 26 deletions
diff --git a/web/style/layout.css b/web/style/layout.css index 16ae668..3ad5236 100644 --- a/web/style/layout.css +++ b/web/style/layout.css @@ -106,19 +106,19 @@ footer p { margin-right: 3px; } -.homelist { +.hlist { overflow-x: scroll; max-width: 100%; } -.homelist ul { +.hlist ul { display: table; } -.homelist ul li { +.hlist ul li { display: table-cell; } @media (max-width: 750px) { - .homelist ul { + .hlist ul { padding-left: 0; } } diff --git a/web/style/nodecard.css b/web/style/nodecard.css index 7554649..b0dd3e2 100644 --- a/web/style/nodecard.css +++ b/web/style/nodecard.css @@ -18,52 +18,52 @@ display: block; } -.node.card { +.card { padding: 1em; } -.node.card .poster, -.node.card .poster img { +.card .poster, +.card .poster img { height: var(--card-size); } -.node.card.aspect-port { +.card.aspect-port { width: calc(var(--card-size) / var(--port-poster-aspect)); } -.node.card.aspect-land { +.card.aspect-land { width: calc(var(--card-size) / var(--land-poster-aspect)); } -.node.card.aspect-thumb { +.card.aspect-thumb { width: calc(var(--card-size) / var(--land-thumb-aspect)); } -.node.card.aspect-square { +.card.aspect-square { width: calc(var(--card-size)); } -.node.card .poster a img { +.card .poster a img { object-fit: cover; object-position: center; width: 100%; } -.node.card .title { +.card .title { text-align: center; margin-top: 0.5em; text-align: center; text-overflow: ellipsis; } -.node.card .title a { +.card .title a { text-decoration-line: none; } -.node.card .title a:hover { +.card .title a:hover { text-decoration-line: underline; } -.node.card .poster { +.card .poster { display: grid; } -.node.card .poster a { +.card .poster a { grid-area: 1 / 1; } -.node.card.poster .poster .cardhover.item { +.card .poster .cardhover { position: relative; pointer-events: none; grid-area: 1 / 1; @@ -74,23 +74,23 @@ justify-content: center; align-items: center; } -.node.card.poster .poster:hover .cardhover.item { +.card .poster:hover .cardhover { opacity: 1; } -.node.card.poster .poster a { +.card .poster a { overflow: hidden; } -.node.card.poster .poster a img { +.card .poster a img { transition: transform 0.3s; } -.node.card.poster .poster:hover a img { +.card .poster:hover a img { transform: scale(1.1); } -.node.card.poster .poster .cardhover.item a.play { +.card .poster .cardhover a.play { text-decoration: none; width: 1em; height: 1em; @@ -103,11 +103,11 @@ background-color: var(--overlay); transition: background-color 0.3s, font-size 0.3s; } -.node.card.poster .poster .cardhover.item a.play:hover { +.card .poster .cardhover a.play:hover { background-color: var(--overlay-hover); font-size: 3em; } -.node.card.poster .poster .cardhover.item .props { +.card .poster .cardhover .props { position: absolute; bottom: 0px; left: 0px; @@ -120,4 +120,4 @@ .children { justify-content: center; } -}
\ No newline at end of file +} |