fbpx

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 “.زر”, code can be added for “.ui.buttoncustomize certain styling withimportant!” .

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: “قائمة الطعام”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
“قائمة الطعام”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.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
“الكاميرا”
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
“فيديو”
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: “علامات التبويب”
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%auto45px;
}
.layoutWay2Audio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
send
“فيديو”
“الكاميرا”
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;
}
/* 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: “الكاميرا”
history
send
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
send
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
send
actions
“الكاميرا”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
actions
“علامات التبويب”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “علامات التبويب”
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: “علامات التبويب”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
send
“فيديو”
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
send
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
send
“فيديو”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “الكاميرا”
history
send
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
send
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
send
actions
“الكاميرا”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
display: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
actions
“علامات التبويب”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: relative;
grid-area: الكاميرا;
}
.layVideo {
position: relative;
grid-area: فيديو;
}
.layHistory {
position: relative;
grid-area: history;
}
.laySend {
position: relative;
grid-area: send;
}
.layActions {
position: relative;
grid-area: actions;
}
.layTabs {
position: relative;
grid-area: علامات التبويب;
}
.layMenu {
position: relative;
grid-area: قائمة الطعام;
}
.layPane {
position: relative;
grid-area: pane;
}
.layChat {
position: relative;
grid-area: الدردشة;
}
.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;
}
Ps: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* فيديو */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
list-style-type: لا شيء;
}
.chatMessage {
list-style-type: لا شيء;
padding-right: 10px;
font-size: 12px;
اللون: #777;
font-weight: normal;
}
.chatMessage.dark
{
اللون: #FFF;
}
.chatMessage.notification {
اللون: #7A7;
text-align: يسار;
}
.chatMessage.dark.notification
{
اللون: #EFE;
}
.chatMessage.automated {
font-style: italic;
اللون: #7AA;
text-align: يسار;
}
.chatMessage.user {
text-align: يسار;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
display: inline-block;
max-width: 85%;
background-color: white;
border-radius: 5px;
padding: 5px;
margin: 2px;
}
.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;
}