stremio-web/src/common/MetaItem/styles.less

.meta-item-container {
    margin: 10px;
    display: inline-block;
    background-color: var(--color-backgroundlight);

    .poster-image-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 0;

        .placeholder-image {
            width: calc(var(--poster-relative-size) * 0.5);
            height: calc(var(--poster-relative-size) * 0.5);
            fill: var(--color-surfacelighter);
        }

        .poster-image {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-origin: border-box;
        }

        .progress-bar-container {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2;
            height: var(--progress-bar-size);
            background-color: var(--color-backgroundlighter);
            box-shadow: 0 0 calc(var(--progress-bar-size) * 4) calc(var(--progress-bar-size) * 1.5) var(--color-backgrounddarker);

            .progress {
                height: 100%;
                background-color: var(--color-primary);
            }
        }
    }

    .title-bar-container {
        height: 3em;
        display: flex;
        flex-direction: row;
        align-items: center;

        .title {
            flex: 1;
            font-size: 1.4em;
            padding: 0 0.5em;
            color: var(--color-surfacelighter);
        }

        .menu-icon {
            width: 3em;
            height: 3em;
            padding: 0.8em;
            fill: var(--color-surfacelighter);

            &:hover, &:global(.active) {
                background-color: var(--color-backgroundlighter);
            }
        }
    }

    &.poster-shape-square {
        .poster-image-container {
            width: var(--poster-relative-size);
            height: var(--poster-relative-size);
        }
    }

    &.poster-shape-landscape {
        .poster-image-container {
            width: calc(var(--poster-relative-size) / var(--landscape-shape-ratio));
            height: var(--poster-relative-size);
        }
    }

    &.poster-shape-poster {
        &.relative-size-auto {
            .poster-image-container {
                width: var(--poster-relative-size);
                height: calc(var(--poster-relative-size) * var(--poster-shape-ratio));
            }
        }

        &.relative-size-height {
            .poster-image-container {
                width: calc(var(--poster-relative-size) / var(--poster-shape-ratio));
                height: var(--poster-relative-size);
            }
        }
    }
}

.menu-items-container {
    background-color: var(--color-surfacelighter);
    min-width: calc(var(--poster-relative-size) * 0.3);
    max-width: var(--poster-relative-size);

    .menu-item {
        width: 100%;
        color: var(--color-backgrounddarker);
        font-size: 1.2em;
        padding: 0.5em;

        &:hover {
            background-color: var(--color-surfacelight);
        }
    }
}