CSS

The HTML5 Videochat app can be customizes as layout, aspect, interface with custom CSS. This involves more advanced designer skills.

Interface Elements

App uses elements from these interface frameworks:

– Fomantic UI
– Semantic UI React

If  theme overwrites styling for some of the classes, your designer can add extra css code to fix. Or just add custom styling to match site theme.
In example for “.button”, code can be added for “.ui.button” customize certain styling with “important!” .

Custom App CSS

This code may be outdated by recent versions, but it lists main elements you can customize:

Layout

/* Panel Layouts */
.layoutChat {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “menu”
“pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”
“menu”;
grid-template-columns: 100%;
grid-template-rows: auto 55px;
}
.layoutScrollable {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: hidden;
}
/* App Layouts */
.layoutBroadcast {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history”
“actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“camera”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history”
“actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“video”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video camera”
“video history”
“actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto50px;
}
.layoutWay2Audio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“video”
“camera”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video tabs”
“actions tabs”;
grid-template-columns: 65%35%;
grid-template-rows: auto45px;
}
.layoutCollaborationPiP {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video tabs”;
grid-template-columns: 65%35%;
grid-template-rows: 100%;
}
/* Mobile Layouts */
/* For lower resolutions video takes full width and chat shows below */
@media only screen and (max-width: 1150px)
{
.layoutBroadcast {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera”
“history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“history”
“send”
“actions”
“camera”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“actions”
“tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (max-width: 800px)
{
.layoutText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“video”
“camera”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“camera”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“send”
“video”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera”
“history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“history”
“send”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“history”
“send”
“actions”
“camera”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “video”
“actions”
“tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: relative;
grid-area: camera;
}
.layVideo {
position: relative;
grid-area: video;
}
.layHistory {
position: relative;
grid-area: history;
}
.laySend {
position: relative;
grid-area: send;
}
.layActions {
position: relative;
grid-area: actions;
}
.layTabs {
position: relative;
grid-area: tabs;
}
.layMenu {
position: relative;
grid-area: menu;
}
.layPane {
position: relative;
grid-area: pane;
}
.layChat {
position: relative;
grid-area: chat;
}
.layScrollable {
position: relative;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”
“media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”
“media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1 media2”
“media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”
“media2 media3”
“media4 media5”;
grid-template-columns: 50%50%;
grid-template-rows: 34%33%33%;
}
/* Split Multimedia View Slots */
.slot0 {
position: relative;
grid-area: media0;
}
.slot1 {
position: relative;
grid-area: media1;
}
.slot2 {
position: relative;
grid-area: media2;
}
.slot3 {
position: relative;
grid-area: media3;
}
.slot4 {
position: relative;
grid-area: media4;
}
.slot5 {
position: relative;
grid-area: media5;
}

Interface CSS

/* Interface Elements, contained in Controls */
.videowhisperAppLogo{
position: absolute;
left: 10px;
top: 10px;
max-width: 100px;
}
/* Videos */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageList {
list-style-type: none;
}
.chatMessageListli {
position: relative;
}
.chatMessage {
list-style-type: none;
padding-right: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: italic;
color: #7AA;
}
.chatMessage.user {
text-align: left;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
display: inline-block;
max-width: 85%;
background-color: white;
border-radius: 5px;
padding: 8px;
margin: 8px;
margin-left: 46px;
margin-right: 40px;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
display: inline-block;
font-size: 11px;
padding: 3px;
font-weight: normal;
}
.chatMessage.useri {
font-size: 10px;
padding: 3px;
}
.chatMessage.user.own {
text-align: right;
}
.chatMessage label::before {
content: ”;
border-top:10pxsolid#FFF;
border-left:10pxsolidtransparent;
bottom: 16px;
left: 36px;
position: absolute;
}
.chatMessage.dark label::before{
border-top:10pxsolid#111;
}
.chatMessage.own label::before{
left: unset;
right: 40px;
border-top:10pxsolid#FFF;
border-right:10pxsolidtransparent;
}
.chatMessage.dark label::before{
border-top:10pxsolid#111;
}
.chatMessage .avatar {
position: absolute;
left: 0px;
top: 32px;
}
.chatMessage.own .avatar {
position: absolute;
left: unset;
right: 0px;
}