Receivers: Added support for viewing browser supported generic file content

receivers/common/web/viewer/common.css

@@ -0,0 +1,164 @@
+html {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: black;
+    color: white;
+    width: 100vw;
+    max-width: 100%;
+    height: 100vh;
+    max-height: 100%;
+}
+
+.viewer {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+
+*:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+#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)) {
+    #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)) {
+    #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)) {
+    #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)) {
+    #toast-notification {
+        padding: 4px;
+    }
+
+    #toast-icon {
+        width: 32px;
+        height: 32px;
+        margin: 5px 5px;
+    }
+
+    #toast-text {
+        font-size: 14px;
+    }
+}