Ein wenig CSS-Anpassung

Jetzt haben Sie einen vollständig funktionierenden Client mit Vonage Video. In diesem letzten Schritt werden einige grundlegende CSS-Anpassungen demonstriert.

1. Öffnen Sie Ihre leere app.css-Datei in Ihrem Code-Editor und fügen Sie den folgenden Code hinzu:

   widgets.copy

   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. Sobald Sie das CSS gespeichert haben, öffnen Sie Ihren Index erneut in zwei separaten Browser-Tabs - Sie sollten nun sehen, dass die Nachrichten entweder rechts oder links angeheftet werden, je nachdem, wer sie gesendet hat. Die Seite ist so eingerichtet, dass neben dem Text-Chat auch ein Video-Chat möglich ist.