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;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “منو”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “scrollable
“منو”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
نمایش دادن: grid;
عرض: 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;
عرض: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
“دوربین”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
video
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “tabs
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
نمایش دادن: grid;
عرض: 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;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
video
“دوربین”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
نمایش دادن: grid;
عرض: 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;
عرض: 100%;
height: 100%;
grid-template-areas: “دوربین”
history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
history
“ارسال”
“اقدامات”
“دوربین”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
“اقدامات”
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “tabs
“اقدامات”;
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;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “tabs
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
video
“دوربین”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
“دوربین”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “history
“ارسال”
video
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “دوربین”
history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
history
“ارسال”
“اقدامات”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
history
“ارسال”
“اقدامات”
“دوربین”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “video
“اقدامات”
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: نسبت فامیلی;
grid-area: دوربین;
}
.layVideo {
position: نسبت فامیلی;
grid-area: video;
}
.layHistory {
position: نسبت فامیلی;
grid-area: history;
}
.laySend {
position: نسبت فامیلی;
grid-area: ارسال;
}
.layActions {
position: نسبت فامیلی;
grid-area: اقدامات;
}
.layTabs {
position: نسبت فامیلی;
grid-area: tabs;
}
.layMenu {
position: نسبت فامیلی;
grid-area: منو;
}
.layPane {
position: نسبت فامیلی;
grid-area: pane;
}
.layChat {
position: نسبت فامیلی;
grid-area: گپ;
}
.layScrollable {
position: نسبت فامیلی;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
نمایش دادن: grid;
عرض: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
نمایش دادن: grid;
عرض: 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;
عرض: 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;
}
PS: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* فیلم های */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
عرض: 100%;
height: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
بالشتک: 0;
حاشیه: 0;
}
.chatMessageListul {
list-style-type: هیچ;
}
.chatMessage {
list-style-type: هیچ;
padding-right: 10پیکسل;
font-size: 12پیکسل;
رنگ: #777;
font-weight: طبیعی;
}
.chatMessage.dark
{
رنگ: #FFF;
}
.chatMessage.notification {
رنگ: #7A7;
تراز متن: left;
}
.chatMessage.dark.notification
{
رنگ: #EFE;
}
.chatMessage.automated {
نوع قلم: italic;
رنگ: #7AA;
تراز متن: left;
}
.chatMessage.user {
تراز متن: left;
}
.chatMessageimg {
vertical-align: middle;
بالشتک: 2پیکسل;
}
.chatMessagelabel {
نمایش دادن: نشان دهنده بلوک;
حداکثر عرض: 85%;
background-color: white;
مرز-شعاع: 5پیکسل;
بالشتک: 5پیکسل;
حاشیه: 2پیکسل;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
نمایش دادن: نشان دهنده بلوک;
font-size: 11پیکسل;
بالشتک: 3پیکسل;
font-weight: طبیعی;
}
.chatMessage.useri {
font-size: 10پیکسل;
بالشتک: 3پیکسل;
}
.chatMessage.user.own {
تراز متن: درست;
}