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%;
Высота: 100%;
grid-template-areas: “history
“Отправить”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “меню”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “scrollable
“меню”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 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%;
Высота: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Вкладки”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 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%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
дисплей: 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 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “камера”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”
“камера”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
“Действия”
“Вкладки”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Вкладки”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (макс-ширина: 800px)
{
.layoutText {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Вкладки”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “камера”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”
“камера”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
“Действия”
“Вкладки”;
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: Действия;
}
.layTabs {
position: Относительная;
grid-area: Вкладки;
}
.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%;
Высота: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 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%;
Высота: 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;
Ширина: 100%;
Высота: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
заполнение: 0;
маржа: 0;
}
.chatMessageListul {
list-style-type: ни один;
}
.chatMessage {
list-style-type: ни один;
padding-right: 10px;
Размер шрифта: 12px;
Цвет: #777;
плотность шрифта: нормальный;
}
.chatMessage.dark
{
Цвет: #FFF;
}
.chatMessage.notification {
Цвет: #7A7;
Выравнивание текста: left;
}
.chatMessage.dark.notification
{
Цвет: #EFE;
}
.chatMessage.automated {
стиль шрифта: italic;
Цвет: #7AA;
Выравнивание текста: left;
}
.chatMessage.user {
Выравнивание текста: left;
}
.chatMessageimg {
vertical-align: middle;
заполнение: 2px;
}
.chatMessagelabel {
дисплей: Встроенный блок;
макс-ширина: 85%;
background-color: white;
границы радиуса: 5px;
заполнение: 5px;
маржа: 2px;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
дисплей: Встроенный блок;
Размер шрифта: 11px;
заполнение: 3px;
плотность шрифта: нормальный;
}
.chatMessage.useri {
Размер шрифта: 10px;
заполнение: 3px;
}
.chatMessage.user.own {
Выравнивание текста: право;
}