stremio-web/src/routes/Detail/styles.less

.detail-container, :global(.detail-popup-container) {
    --spacing: 8px;
    --action-button-width: 80px;
    --video-width: 360px;
    --stream-width: 360px;
    font-size: 12px;
}

.detail-container {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .overlay-container {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-backgrounddarker60);
    }

    .info-container {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 40%;
        bottom: 0;
        padding: calc(var(--spacing) * 3);

        .logo {
            display: block;
            height: calc(var(--action-button-width) * 1.2);
            object-fit: contain;
        }

        .logo-error {
            display: none;
        }

        .duration {
            display: inline-block;
            max-width: 45%;
            margin-right: 1.2em;
            font-size: 1.15em;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
            color: var(--color-surfacelight);
        }

        .release-info {
            display: inline-block;
            max-width: 45%;
            font-size: 1.15em;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
            color: var(--color-surfacelight);
        }

        .name {
            max-height: 3em;
            overflow: hidden;
            overflow-wrap: break-word;
            font-size: 1.5em;
            line-height: 1.5;
            color: var(--color-surfacelight);
        }

        .description {
            max-height: 10.5em;
            overflow: hidden;
            overflow-wrap: break-word;
            line-height: 1.5;
            color: var(--color-surfacelight);
        }

        .section-container {
            max-height: 3.2em;
            overflow: hidden;

            .title {
                margin-bottom: 0.3em;
                font-size: 1.15em;
                color: var(--color-surface);
            }

            .link {
                display: none;
                max-width: 100%;
                padding: 0.3em 0.6em;
                font-size: 1.15em;
                overflow: hidden;
                white-space: pre;
                text-overflow: ellipsis;
                color: var(--color-surfacelight);
                cursor: pointer;

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

                &:nth-child(-n+6) {
                    display: inline-block;
                }
            }
        }

        .action-buttons-container {
            position: absolute;
            left: calc(var(--spacing) * 3);
            bottom: calc(var(--spacing) * 3);

            .action-button-container {
                cursor: pointer;
                width: var(--action-button-width);
                height: var(--action-button-width);
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;

                .icon {
                    height: 30%;
                    margin: 10% 0;
                    fill: var(--color-surfacelight);
                }

                .label {
                    height: 2.4em;
                    padding: 0 1em;
                    overflow-wrap: break-word;
                    overflow: hidden;
                    font-size: 1.05em;
                    line-height: 1.2em;
                    color: var(--color-surfacelight);
                }

                &:hover {
                    background-color: var(--color-surfacedarker60);

                    .icon {
                        fill: var(--color-surfacelighter);
                    }

                    .label {
                        color: var(--color-surfacelighter);
                    }
                }
            }
        }

        >:not(:last-child) {
            margin-bottom: calc(var(--spacing) * 1.5);
        }
    }

    .videos-list {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        padding: calc(3 * var(--spacing)) 0;
    }
}