/* 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;
}