[mirotalksfu] - first release

public/css/Room.css

@@ -0,0 +1,575 @@
+/*--------------------------------------------------------------
+# Keyframes
+--------------------------------------------------------------*/
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+:root {
+    --msger-top: 50%;
+    --msger-left: 50%;
+    --msger-height: 680px;
+    --msger-width: 420px;
+    --msger-bg: #16171b;
+    --left-msg-bg: #222328;
+    --right-msg-bg: #0a0b0c;
+    --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
+* {
+    outline: none;
+    font-family: 'Verdana';
+}
+
+body {
+    background-image: url('../images/background.jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+/*--------------------------------------------------------------
+# Control buttons
+--------------------------------------------------------------*/
+
+#control {
+    z-index: 1;
+    position: fixed;
+    padding: 10px;
+    top: 0;
+    width: 100%;
+    background: black;
+}
+
+#control button {
+    border-radius: 5px;
+}
+#control p {
+    font-size: small;
+    cursor: default;
+}
+
+/*--------------------------------------------------------------
+# Room QR
+--------------------------------------------------------------*/
+
+#qrRoomContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/*--------------------------------------------------------------
+# Video grid
+--------------------------------------------------------------*/
+
+.containers {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 10px;
+    row-gap: 10px;
+    border-radius: 5px;
+}
+
+@media only screen and (max-width: 720px) {
+    .containers {
+        display: grid;
+        grid-template-columns: 1fr;
+        column-gap: 10px;
+        row-gap: 10px;
+        border-radius: 5px;
+    }
+}
+
+.vid {
+    flex: 0 1 auto;
+    height: 360px;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    box-shadow: var(--box-shadow);
+}
+
+video:hover {
+    opacity: 0.9;
+}
+
+video:fullscreen {
+    object-fit: contain; /* cover; */
+    opacity: 1;
+}
+
+.mirror {
+    -webkit-transform: rotateY(180deg);
+    -moz-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+}
+
+#videoMedia {
+    margin-top: 50px;
+}
+
+#localMedia,
+#remoteVideos {
+    margin: 10px;
+    cursor: default;
+}
+
+.pn {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    margin: 10px;
+    width: auto;
+    height: 30px;
+    border-radius: 5px;
+    margin-top: 325px;
+    color: white;
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.d,
+.d video {
+    position: relative;
+}
+
+.d p {
+    position: absolute;
+    padding: 10px;
+    margin: 10px;
+    width: auto;
+    height: 30px;
+    border-radius: 5px;
+    top: 315px;
+    color: white;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+}
+
+/*--------------------------------------------------------------
+# Dropdown menù
+--------------------------------------------------------------*/
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    z-index: 2;
+    display: none;
+    position: absolute;
+    margin: auto;
+    padding: 10px;
+    min-width: 200px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    overflow: auto;
+    border-radius: 5px;
+    box-shadow: var(--box-shadow);
+}
+
+.dropdown-content select {
+    width: auto;
+    font-size: small;
+}
+
+/*--------------------------------------------------------------
+# Recording
+--------------------------------------------------------------*/
+
+.recording {
+    display: flex;
+}
+
+.recording button,
+.recording p {
+    padding: 5px;
+    margin: 1px;
+    font-size: 0.8em;
+    border-radius: 5px;
+}
+
+/*--------------------------------------------------------------
+# Chat Room
+--------------------------------------------------------------*/
+
+.chat-room {
+    z-index: 3;
+    display: none;
+    position: fixed;
+    height: var(--msger-height);
+    width: var(--msger-width);
+    background: var(--msger-bg);
+    border-radius: 5px;
+    border-radius: 10px;
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+}
+
+.msger {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: space-between;
+    top: var(--msger-top);
+    left: var(--msger-left);
+    height: var(--msger-height);
+    width: var(--msger-width);
+    background: var(--msger-bg);
+}
+
+/*--------------------------------------------------------------
+# Chat room header
+--------------------------------------------------------------*/
+
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    background: rgb(0, 0, 0);
+    color: #666;
+    cursor: move;
+}
+
+.chat-header-options button {
+    border: none;
+    font-size: 1.2rem;
+    transition: all 0.3s ease-in-out;
+    background: rgb(0, 0, 0);
+    color: #fff;
+    border-radius: 5px;
+    transition: background 0.23s;
+}
+
+/*--------------------------------------------------------------
+# Chat room output area
+--------------------------------------------------------------*/
+
+.chat-msger {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background: var(--msger-bg);
+}
+
+.chat-msger::-webkit-scrollbar {
+    width: 5px;
+}
+
+.chat-msger::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-msger::-webkit-scrollbar-thumb {
+    background: black;
+    /*aqua;*/
+}
+
+.msg {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+}
+
+.msg:last-of-type {
+    margin: 0;
+}
+
+/*--------------------------------------------------------------
+# Chat room left side
+--------------------------------------------------------------*/
+
+.left-msg .msg-bubble {
+    background: var(--left-msg-bg);
+    border-bottom-left-radius: 0;
+    color: #fff;
+}
+
+.left-msg .private-msg-bubble {
+    background: var(--private-msg-bg);
+    border-bottom-left-radius: 0;
+    color: #fff;
+}
+
+/*--------------------------------------------------------------
+# Chat room right side
+--------------------------------------------------------------*/
+
+.right-msg {
+    flex-direction: row-reverse;
+}
+
+.right-msg .msg-bubble {
+    background: var(--right-msg-bg);
+    border-bottom-right-radius: 0;
+    color: #fff;
+}
+
+.right-msg .private-msg-bubble {
+    background: var(--private-msg-bg);
+    border-bottom-right-radius: 0;
+    color: #fff;
+}
+
+.right-msg .msg-img {
+    margin: 0 0 0 10px;
+}
+
+/*--------------------------------------------------------------
+# Chat room common
+--------------------------------------------------------------*/
+
+.msg-img {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+.msg-bubble {
+    max-width: 200px;
+    padding: 15px;
+    border-radius: 15px;
+}
+
+.msg-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.msg-info-name {
+    margin-right: 10px;
+    font-weight: bold;
+}
+
+.msg-info-time {
+    font-size: 0.85em;
+}
+
+.msg-text {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+}
+
+#chat-msg-a {
+    color: white;
+}
+
+/*--------------------------------------------------------------
+# Chat room input area
+--------------------------------------------------------------*/
+
+.chat-msger-inputarea {
+    display: flex;
+    padding: 10px;
+    background: #222328;
+}
+
+.chat-msger-input {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-top-left-radius: 10px;
+    background: rgb(0, 0, 0);
+    color: white;
+}
+
+.chat-msger-inputarea button {
+    width: 32px;
+}
+
+/*--------------------------------------------------------------
+# Chat room emoji picker
+--------------------------------------------------------------*/
+
+emoji-picker {
+    top: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    --background: #16171b;
+    --num-columns: 9;
+    --emoji-size: 1.5rem;
+    overflow: hidden;
+}
+
+/*--------------------------------------------------------------
+# swal2
+--------------------------------------------------------------*/
+
+.swal2-validation-message,
+.swal2-title,
+.swal2-content,
+.swal2-input {
+    text-align: center;
+    color: white !important;
+    background-color: transparent !important;
+}
+
+/*--------------------------------------------------------------
+# About
+--------------------------------------------------------------*/
+
+#about {
+    cursor: default;
+}
+
+#about b {
+    color: rgb(0, 180, 50);
+}
+
+#about img {
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+#about a {
+    color: white;
+    text-decoration: none;
+}
+
+#about a:hover {
+    color: rgb(0, 180, 50);
+    transition: all 0.3s ease-in-out;
+}
+
+#about button {
+    border: none;
+    width: 170px;
+    height: 40px;
+    font-size: 1.2rem;
+    background: linear-gradient(100deg, #376df9 0, #4b4547 75%, #222222 100%);
+    box-shadow: 0 0 6px 0 rgb(251 255 0 / 82%);
+    color: #ffffff;
+    transition: background 0.23s;
+    cursor: pointer;
+}
+
+#about button:hover {
+    font-weight: bold;
+}
+
+/*--------------------------------------------------------------
+# Common
+--------------------------------------------------------------*/
+
+.hidden {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.fadein {
+    -webkit-animation: fadeIn ease-in 1;
+    -moz-animation: fadeIn ease-in 1;
+    animation: fadeIn ease-in 1;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+}
+
+p,
+button {
+    background: black;
+    color: white;
+    border: none;
+}
+
+button:hover {
+    color: rgb(0, 180, 50);
+}
+
+/*--------------------------------------------------------------
+# Pulse class effect
+--------------------------------------------------------------*/
+
+.pulsate {
+    animation: pulsate 3s ease-out;
+    animation-iteration-count: infinite;
+    -webkit-animation: pulsate 3s ease-out;
+    -webkit-animation-iteration-count: infinite;
+    opacity: 0.5;
+}
+
+@-webkit-keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
+
+@-webkit-keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}