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 {
位置: 絕對;
顯示: 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
{
visibility: visible;
}
.paneInactive
{
visibility: 隱藏;
}
/* App Layouts */
.layoutBroadcast {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“相機”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“視頻”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
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;
}
.layoutWay2Audio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“視頻”
“相機”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.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 only screen and (最大寬度: 1150px)
{
.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: auto60px45%;
}
.layoutCollaborationText {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 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 (最大寬度: 800px)
{
.layoutText {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“視頻”
“相機”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“相機”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “history
“發送”
“視頻”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “相機”
history
“發送”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “視頻”
history
“發送”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “視頻”
history
“發送”
actions
“相機”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
位置: 絕對;
顯示: grid;
寬度: 100%;
高度: 100%;
grid-template-areas: “視頻”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* 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;
}
.layChat {
位置: 相對;
grid-area: 聊天;
}
.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.

Interface CSS

/* Interface Elements, contained in Controls */
/* 視頻 */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
位置: 絕對;
寬度: 100%;
高度: 100%;
overflow-y: scroll;
/* 背景顏色: rgb(225, 233, 225); */
填充: 0;
保證金: 0;
}
.chatMessageListul {
list-style-type: 沒有一個;
}
.chatMessage {
list-style-type: 沒有一個;
填滿右側: 10px;
字體大小: 12px;
顏色: #777;
字體粗細: 正常;
}
.chatMessage.dark
{
顏色: #FFF;
}
.chatMessage.notification {
顏色: #7A7;
文本對齊: 左;
}
.chatMessage.dark.notification
{
顏色: #EFE;
}
.chatMessage.automated {
字體樣式: italic;
顏色: #7AA;
文本對齊: 左;
}
.chatMessage.user {
文本對齊: 左;
}
.chatMessageimg {
vertical-align: middle;
填充: 2px;
}
.chatMessagelabel {
顯示: 內聯塊;
最大寬度: 85%;
背景顏色: 白色;
邊界半徑: 5px;
填充: 5px;
保證金: 2px;
}
.chatMessage.darklabel{
背景顏色: #111;
}
.chatMessage.userstrong {
顯示: 內聯塊;
字體大小: 11px;
填充: 3px;
字體粗細: 正常;
}
.chatMessage.useri {
字體大小: 10px;
填充: 3px;
}
.chatMessage.user.own {
文本對齊: 權利;
}