/* This file is part of jellything (https://codeberg.org/metamuffin/jellything) which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2025 metamuffin Copyright (C) 2023 tpart */ .poster * img, .bigposter img { background-color: var(--image-loading-placeholder); } .poster a, .bigposter img { border-radius: 1em; } .card { padding: 1em; } .card .poster, .card .poster img { height: var(--card-size); } .aspect-port { width: calc(var(--card-size) * var(--port-poster-aspect)); } .aspect-land { width: calc(var(--card-size) * var(--land-poster-aspect)); } .aspect-thumb { width: calc(var(--card-size) * var(--land-thumb-aspect)); } .aspect-square { width: calc(var(--card-size)); } .card .poster a img { object-fit: cover; object-position: center; width: 100%; } .card .title, .card .subtitle { text-align: center; margin-top: 0.5em; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .card .subtitle { margin-top: 0.25em; } .card .subtitle * { color: var(--font-dark); } .card .title a, .card .subtitle a { text-decoration-line: none; } .card .title a:hover { text-decoration-line: underline; } .card .title .subtitle { color: grey; } .card .poster { display: grid; } .card .poster a { grid-area: 1 / 1; } .card .poster .cardhover { position: relative; pointer-events: none; grid-area: 1 / 1; transition: opacity 0.3s; background-color: var(--overlay-poster); opacity: 0; display: flex; justify-content: center; align-items: center; } .card .poster:hover .cardhover { opacity: 1; } .card .poster a { overflow: hidden; } .card .poster a img { transition: transform 0.3s; } .card .poster:hover a img { transform: scale(1.1); } .card .poster .cardhover a.play { text-decoration: none; width: 1em; height: 1em; line-height: 1; margin: auto; padding: 0.2em; border-radius: 50%; font-size: 2.2em; pointer-events: all; background-color: var(--overlay); transition: background-color 0.3s, font-size 0.3s; } .card .poster .cardhover a.play:hover { background-color: var(--overlay-hover); font-size: 3em; } .card .poster .cardhover .props { position: absolute; bottom: 0px; left: 0px; } .widecard { display: grid; grid-template-columns: 1fr 10000fr; width: 100%; } .widecard .poster { grid-column: 1; } .widecard .details { grid-column: 2; margin: 1em; } .widecard .details .title { font-size: large; } .widecard .details .props { margin-bottom: 0.5em; } @media (max-width: 750px) { nav .library { display: none; } .children { justify-content: center; } }