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 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Меню”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “scrollable
“Меню”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
позиция: 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 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Вкладки”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
позиция: 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 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “камера”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”
“камера”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
“Действия”
“Вкладки”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
позиция: 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 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “Вкладки”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“камера”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “history
“Отправить”
“видео”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “камера”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
history
“Отправить”
“Действия”
“камера”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “видео”
“Действия”
“Вкладки”;
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: Действия;
}
.layTabs {
позиция: Относительная;
grid-area: Вкладки;
}
.layMenu {
позиция: Относительная;
grid-area: Меню;
}
.layPane {
позиция: Относительная;
grid-area: pane;
}
.layChat {
позиция: Относительная;
grid-area: прямо;
}
.layScrollable {
позиция: Относительная;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
позиция: absolute;
дисплей: grid;
Ширина: 100%;
Высота: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
позиция: 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 {
позиция: 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 {
позиция: Относительная;
grid-area: media0;
}
.slot1 {
позиция: Относительная;
grid-area: media1;
}
.slot2 {
позиция: Относительная;
grid-area: media2;
}
.slot3 {
позиция: Относительная;
grid-area: media3;
}
.slot4 {
позиция: Относительная;
grid-area: media4;
}
.slot5 {
позиция: Относительная;
grid-area: media5;
}
Л.С.: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Видео */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
позиция: absolute;
Ширина: 100%;
Высота: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
padding: 0;
маржа: 0;
}
.chatMessageListul {
list-style-type: ни один;
}
.chatMessage {
list-style-type: ни один;
padding-right: 10px;
Размер шрифта: 12px;
цвет: #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;
padding: 2px;
}
.chatMessagelabel {
дисплей: Встроенный блок;
макс-ширина: 85%;
background-color: white;
границы радиуса: 5px;
padding: 5px;
маржа: 2px;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
дисплей: Встроенный блок;
Размер шрифта: 11px;
padding: 3px;
font-weight: нормальный;
}
.chatMessage.useri {
Размер шрифта: 10px;
padding: 3px;
}
.chatMessage.user.own {
Выравнивание текста: право;
}