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

Layout

/* Panel Layouts */
.layoutChat {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “menu
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
menu”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
عرض: 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;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“فيديو”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
عرض: 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;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“فيديو”
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
عرض: 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 (الحد الأقصى للعرض: 1150بكسل)
{
.layoutBroadcast {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “الكاميرا”
history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
“إرسال”
actions
“الكاميرا”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
عرض: 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 (الحد الأقصى للعرض: 800بكسل)
{
.layoutText {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“فيديو”
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“الكاميرا”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“إرسال”
“فيديو”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “الكاميرا”
history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
“إرسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
history
“إرسال”
actions
“الكاميرا”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “فيديو”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: قريب;
grid-area: الكاميرا;
}
.layVideo {
position: قريب;
grid-area: فيديو;
}
.layHistory {
position: قريب;
grid-area: history;
}
.laySend {
position: قريب;
grid-area: إرسال;
}
.layActions {
position: قريب;
grid-area: actions;
}
.layTabs {
position: قريب;
grid-area: tabs;
}
.layMenu {
position: قريب;
grid-area: menu;
}
.layPane {
position: قريب;
grid-area: pane;
}
.layChat {
position: قريب;
grid-area: الدردشة;
}
.layScrollable {
position: قريب;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
عرض: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
عرض: 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;
عرض: 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;
عرض: 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: قريب;
grid-area: media0;
}
.slot1 {
position: قريب;
grid-area: media1;
}
.slot2 {
position: قريب;
grid-area: media2;
}
.slot3 {
position: قريب;
grid-area: media3;
}
.slot4 {
position: قريب;
grid-area: media4;
}
.slot5 {
position: قريب;
grid-area: media5;
}
ملاحظة:: 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;
/* لون الخلفية: rgb(225, 233, 225); */
حشوة: 0;
هامش: 0;
}
.chatMessageListul {
list-style-type: لا شيء;
}
.chatMessage {
list-style-type: لا شيء;
الحشو الحق: 10بكسل;
font-size: 12بكسل;
اللون: #777;
font-weight: طبيعي;
}
.chatMessage.dark
{
اللون: #FFF;
}
.chatMessage.notification {
اللون: #7A7;
text-align: يسار;
}
.chatMessage.dark.notification
{
اللون: #EFE;
}
.chatMessage.automated {
نوع الخط: italic;
اللون: #7AA;
text-align: يسار;
}
.chatMessage.user {
text-align: يسار;
}
.chatMessageimg {
vertical-align: middle;
حشوة: 2بكسل;
}
.chatMessagelabel {
عرض: مضمنة كتلة;
الحد الأقصى للعرض: 85%;
لون الخلفية: أبيض;
الحدود-دائرة نصف قطرها: 5بكسل;
حشوة: 5بكسل;
هامش: 2بكسل;
}
.chatMessage.darklabel{
لون الخلفية: #111;
}
.chatMessage.userstrong {
عرض: مضمنة كتلة;
font-size: 11بكسل;
حشوة: 3بكسل;
font-weight: طبيعي;
}
.chatMessage.useri {
font-size: 10بكسل;
حشوة: 3بكسل;
}
.chatMessage.user.own {
text-align: الصحيح;
}