stremio-web/src/routes/Player/ControlBar/styles.less

.control-bar-container {
    padding: 0 calc(var(--control-bar-button-size) * 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;

    .seek-bar {
        --seek-bar-thumb-size: calc(var(--control-bar-button-size) * 0.40);
        --seek-bar-track-size: calc(var(--control-bar-button-size) * 0.12);
        height: calc(var(--control-bar-button-size) * 0.6);
        font-size: calc(var(--control-bar-button-size) * 0.35);
    }

    .control-bar-buttons-container {
        height: var(--control-bar-button-size);
        display: flex;
        flex-direction: row;
        align-items: center;

        .control-bar-button {
            width: var(--control-bar-button-size);
            height: var(--control-bar-button-size);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .icon {
                width: 60%;
                height: 60%;
                fill: var(--color-surfacelight);
                overflow: visible;
            }

            &:global(.active) {
                background-color: var(--color-backgrounddarker);

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

            &:global(.disabled) {
                cursor: default;

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

            &:hover:not(:global(.disabled)) {
                .icon {
                    fill: var(--color-surfacelighter);
                }
            }
        }

        .volume-bar {
            --volume-bar-thumb-size: calc(var(--control-bar-button-size) * 0.36);
            --volume-bar-track-size: calc(var(--control-bar-button-size) * 0.10);
            height: var(--control-bar-button-size);
            width: calc(var(--control-bar-button-size) * 5);

            &:hover, &:global(.active) {
                .control-bar-button {
                    .icon {
                        fill: var(--color-surfacelighter);
                    }
                }
            }
        }

        .spacing {
            flex: 1
        }
    }

    &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        box-shadow: 0 0 calc(var(--control-bar-button-size) * 2) calc(var(--control-bar-button-size) * 2.3) var(--color-backgrounddarker);
        content: "";
    }
}

:global(.player-popup-container) {
    --border-color: var(--color-surfacelighter);

    .popup-content {
        background-color: var(--color-backgrounddark);

        &.share-popup-content {
            width: calc(var(--control-bar-button-size) * 5);
            height: calc(var(--control-bar-button-size) * 3);
        }

        &.subtitles-popup-content {
            --subtitles-picker-button-size: calc(var(--control-bar-button-size) * 0.6);
        }
    }
}