Un poco de personalización CSS

En este punto, ya tienes un cliente completo que funciona con Vonage Video. Este último paso demostrará algunas personalizaciones básicas de CSS.

1. Abre tu archivo app.css en blanco en tu editor de código y añádele el siguiente código:

   Copia

   body, html {
       background-color: gray;
       height: 100%;
   }
   #videos {
       position: relative;
       width: 70%;
       height: 100%;
       float: left;
   }
   #subscriber {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       margin-left: 50px;
       z-index: 10;
   }
   #publisher {
       position: absolute;
       width: 360px;
       height: 240px;
       bottom: 10px;
       left: 10px;
       z-index: 100;
       border: 3px solid white;
       border-radius: 3px;
   }
   #textchat {
       position: relative;
       width: 20%;
       float: right;
       right: 0;
       height: 100%;
       background-color: #333;
   }
   #history {
       width: 100%;
       height: calc(100% - 40px);
       overflow: auto;
   }
   input#msgTxt {
               height: 40px;
               position: absolute;
               bottom: 0;
               width: 100%;
   }
   #history .mine {
       color: #00FF00;
       text-align: right;
       margin-right: 10px;
   }
   #history .theirs {
       color: #00FFFF;
       margin-left: 10px;
   }
   

2. Una vez que hayas guardado el CSS, vuelve a abrir tu página de inicio en dos pestañas distintas del navegador; ahora deberías ver que los mensajes aparecen fijados a la derecha o a la izquierda, dependiendo de quién los haya enviado. La página está configurada para permitir que el chat de vídeo se desarrolle al mismo tiempo que el chat de texto.