fcast/receivers/common/web/viewer/common.css

html {
    margin: -2px;
    padding: 0;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
}

*:focus {
    outline: none;
    box-shadow: none;
}

.video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.viewer {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#title-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-image: url(../assets/icons/app/icon.svg);
    background-size: cover;
}

.lds-ring {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#toast-notification {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 20px;

    position: relative;
    top: calc(-100% + 20px);
    margin: auto;
    max-width: 25%;
    width: fit-content;

    background: rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.33), 0px 64.8148px 46.8519px rgba(0, 0, 0, 0.250556), 0px 38.5185px 25.4815px rgba(0, 0, 0, 0.200444), 0px 20px 13px rgba(0, 0, 0, 0.165), 0px 8.14815px 6.51852px rgba(0, 0, 0, 0.129556), 0px 1.85185px 3.14815px rgba(0, 0, 0, 0.0794444);
    border-radius: 12px;
    opacity: 0;
}

#toast-icon {
    width: 88px;
    height: 88px;
    background-image: url(../assets/icons/app/info.svg);
    background-size: cover;
    filter: grayscale(0.5);
    flex-shrink: 0;
}

#toast-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    margin-right: 5px;

    font-family: InterVariable;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
}

.toast-fade-in {
    animation: toast-fade-in 1.0s cubic-bezier(0.5, 0, 0.5, 1) 1;
}

.toast-fade-out {
    animation: toast-fade-out 1.0s cubic-bezier(0.5, 0, 0.5, 1) 1;
}

@keyframes toast-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Display scaling (Minimum supported resolution is 960x540) */
@media only screen and ((min-width: 2560px) or (min-height: 1440px)) {
    #title-icon {
        width: 164px;
        height: 164px;
    }

    .lds-ring {
        width: 140px;
        height: 140px;
    }
    .lds-ring div {
        width: 124px;
        height: 124px;
    }

    #toast-notification {
        padding: 12px;
    }

    #toast-icon {
        width: 70px;
        height: 70px;
        margin: 5px 10px;
        margin-right: 15px;
    }

    #toast-text {
        font-size: 28px;
    }
}

@media only screen and ((max-width: 2559px) or (max-height: 1439px)) {
    #title-icon {
        width: 124px;
        height: 124px;
    }

    .lds-ring {
        width: 120px;
        height: 120px;
    }
    .lds-ring div {
        width: 104px;
        height: 104px;
    }

    #toast-notification {
        padding: 12px;
    }

    #toast-icon {
        width: 60px;
        height: 60px;
        margin: 5px 5px;
        margin-right: 10px;
    }

    #toast-text {
        font-size: 22px;
    }
}

@media only screen and ((max-width: 1919px) or (max-height: 1079px)) {
    #title-icon {
        width: 84px;
        height: 84px;
    }

    .lds-ring {
        width: 100px;
        height: 100px;
    }
    .lds-ring div {
        width: 84px;
        height: 84px;
    }

    #toast-notification {
        padding: 8px;
    }

    #toast-icon {
        width: 40px;
        height: 40px;
        margin: 5px 5px;
        margin-right: 10px;
    }

    #toast-text {
        font-size: 16px;
    }
}

@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
    #title-icon {
        width: 64px;
        height: 64px;
    }

    .lds-ring {
        width: 80px;
        height: 80px;
    }
    .lds-ring div {
        width: 64px;
        height: 64px;
    }

    #toast-notification {
        padding: 4px;
    }

    #toast-icon {
        width: 32px;
        height: 32px;
        margin: 5px 5px;
    }

    #toast-text {
        font-size: 14px;
    }
}