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

If theme overwrites styling for some of the classes, your designer can add extra css code to fix. Or just add custom styling to match site theme.
In example for “.Кнопку”, code can be added for “.ui.button” customize certain styling with “Важно!” .

Custom App CSS

This code may be outdated by recent versions, but it lists main elements you can customize:

Layout

/* Panel Layouts */
.layoutChat {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “меню”
“pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”
“меню”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
дисплей: grid;
width: 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;
width: 100%;
height: 100%;
grid-template-areas: “camera history”
“actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“камеры”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history”
“actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“видео”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “Вкладки”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
width: 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;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“видео”
“камеры”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
дисплей: grid;
width: 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 (макс-ширина: 1150px)
{
.layoutBroadcast {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “камеры”
“history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“history”
“Отправить”
“actions”
“камеры”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“actions”
“Вкладки”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “Вкладки”
“actions”;
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;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “Вкладки”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“видео”
“камеры”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“камеры”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “history”
“Отправить”
“видео”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “камеры”
“history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“history”
“Отправить”
“actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“history”
“Отправить”
“actions”
“камеры”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “видео”
“actions”
“Вкладки”;
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: actions;
}
.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;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”
“media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
дисплей: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”
“media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
дисплей: grid;
width: 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;
width: 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;
}
Л.С.: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Видео */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
заполнение: 0;
маржа: 0;
}
.chatMessageListul {
list-style-type: ни один;
}
.chatMessage {
list-style-type: ни один;
padding-right: 10px;
font-size: 12px;
Цвет: #777;
плотность шрифта: нормальный;
}
.chatMessage.dark
{
Цвет: #FFF;
}
.chatMessage.notification {
Цвет: #7A7;
text-align: Налево;
}
.chatMessage.dark.notification
{
Цвет: #EFE;
}
.chatMessage.automated {
стиль шрифта: italic;
Цвет: #7AA;
text-align: Налево;
}
.chatMessage.user {
text-align: Налево;
}
.chatMessageimg {
vertical-align: middle;
заполнение: 2px;
}
.chatMessagelabel {
дисплей: Встроенный блок;
макс-ширина: 85%;
background-color: white;
границы радиуса: 5px;
заполнение: 5px;
маржа: 2px;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
дисплей: Встроенный блок;
font-size: 11px;
заполнение: 3px;
плотность шрифта: нормальный;
}
.chatMessage.useri {
font-size: 10px;
заполнение: 3px;
}
.chatMessage.user.own {
text-align: right;
}