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 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “history
“ارسال”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “منو”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “scrollable
“منو”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
}
.paneInactive
{
visibility: پنهان;
}
/* App Layouts */
.layoutBroadcast {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto45px;
}
.layoutPlayback {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto45px;
}
.layoutWay2 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutCollaboration {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 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 screen and (حداکثر عرض: 1150پیکسل)
{
.layoutBroadcast {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “دوربین”
history
“ارسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
history
“ارسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
history
“ارسال”
actions
“دوربین”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto45px45%;
}
}
/* For very low resolutions 2 rows action bar */
@media screen and (حداکثر عرض: 800پیکسل)
{
.layoutBroadcast {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “دوربین”
history
“ارسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px80px;
}
.layoutPlayback {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
history
“ارسال”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px80px;
}
.layoutWay2 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
history
“ارسال”
actions
“دوربین”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px80px25%;
}
.layoutCollaboration {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “تصویری”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto80px40%;
}
}
/* Panels/Components */
.layCamera {
موقعیت: نسبت فامیلی;
grid-area: دوربین;
}
.layVideo {
موقعیت: نسبت فامیلی;
grid-area: تصویری;
}
.layHistory {
موقعیت: نسبت فامیلی;
grid-area: history;
}
.laySend {
موقعیت: نسبت فامیلی;
grid-area: ارسال;
}
.layActions {
موقعیت: نسبت فامیلی;
grid-area: actions;
}
.layTabs {
موقعیت: نسبت فامیلی;
grid-area: tabs;
}
.layMenu {
موقعیت: نسبت فامیلی;
grid-area: منو;
}
.layPane {
موقعیت: نسبت فامیلی;
grid-area: pane;
}
.layScrollable {
موقعیت: نسبت فامیلی;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
موقعیت: مطلق;
نمایش دادن: grid;
عرض: 100%;
ارتفاع: 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 {
موقعیت: نسبت فامیلی;
grid-area: media0;
}
.slot1 {
موقعیت: نسبت فامیلی;
grid-area: media1;
}
.slot2 {
موقعیت: نسبت فامیلی;
grid-area: media2;
}
.slot3 {
موقعیت: نسبت فامیلی;
grid-area: media3;
}
.slot4 {
موقعیت: نسبت فامیلی;
grid-area: media4;
}
.slot5 {
موقعیت: نسبت فامیلی;
grid-area: media5;
}
PS: Latest version may have changes or new elements.