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 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “Menu”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “scrollable
“Menu”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: ẩn;
}
/* App Layouts */
.layoutBroadcast {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“máy ảnh”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“video”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“video”
“máy ảnh”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 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 (chiều rộng tối đa: 1150px)
{
.layoutBroadcast {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “máy ảnh”
history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
history
“gửi”
actions
“máy ảnh”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 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 (chiều rộng tối đa: 800px)
{
.layoutText {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“video”
“máy ảnh”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“máy ảnh”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “history
“gửi”
“video”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “máy ảnh”
history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
history
“gửi”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
history
“gửi”
actions
“máy ảnh”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “video”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
vị trí: tương đối;
grid-area: máy ảnh;
}
.layVideo {
vị trí: tương đối;
grid-area: video;
}
.layHistory {
vị trí: tương đối;
grid-area: history;
}
.laySend {
vị trí: tương đối;
grid-area: gửi;
}
.layActions {
vị trí: tương đối;
grid-area: actions;
}
.layTabs {
vị trí: tương đối;
grid-area: tabs;
}
.layMenu {
vị trí: tương đối;
grid-area: Menu;
}
.layPane {
vị trí: tương đối;
grid-area: pane;
}
.layChat {
vị trí: tương đối;
grid-area: Chat;
}
.layScrollable {
vị trí: tương đối;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
vị trí: Tuyệt đối;
màn hình hiển thị: grid;
chiều rộng: 100%;
chiều cao: 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 {
vị trí: tương đối;
grid-area: media0;
}
.slot1 {
vị trí: tương đối;
grid-area: media1;
}
.slot2 {
vị trí: tương đối;
grid-area: media2;
}
.slot3 {
vị trí: tương đối;
grid-area: media3;
}
.slot4 {
vị trí: tương đối;
grid-area: media4;
}
.slot5 {
vị trí: tương đối;
grid-area: media5;
}
PS: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Video */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
vị trí: Tuyệt đối;
chiều rộng: 100%;
chiều cao: 100%;
overflow-y: scroll;
/* màu nền: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
list-style-type: không có;
}
.chatMessage {
list-style-type: không có;
padding-right: 10px;
Kích thước phông chữ: 12px;
màu sắc: #777;
font-trọng lượng: bình thường;
}
.chatMessage.dark
{
màu sắc: #FFF;
}
.chatMessage.notification {
màu sắc: #7A7;
căn chỉnh văn bản: bên trái;
}
.chatMessage.dark.notification
{
màu sắc: #EFE;
}
.chatMessage.automated {
kiểu phông: italic;
màu sắc: #7AA;
căn chỉnh văn bản: bên trái;
}
.chatMessage.user {
căn chỉnh văn bản: bên trái;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
màn hình hiển thị: Inline-block;
chiều rộng tối đa: 85%;
màu nền: white;
biên giới-bán kính: 5px;
padding: 5px;
margin: 2px;
}
.chatMessage.darklabel{
màu nền: #111;
}
.chatMessage.userstrong {
màn hình hiển thị: Inline-block;
Kích thước phông chữ: 11px;
padding: 3px;
font-trọng lượng: bình thường;
}
.chatMessage.useri {
Kích thước phông chữ: 10px;
padding: 3px;
}
.chatMessage.user.own {
căn chỉnh văn bản: bên phải;
}