/* Dispositions du panneau */
.layoutChat {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Menu”
“Volet”;
grille-modèle-colonnes: 100%;
grille-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Défilement”
“Menu”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto 45px;
}
.mise en pageScrollable {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Défilement”;
grille-modèle-colonnes: 100%;
grille-template-rows: 100%;
}
.voletActive
{
Visibilité: Visible;
}
.paneInactive
{
Visibilité: hidden;
}
/* Dispositions d’applications */
.layoutBroadcast {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “historique de la caméra”
“actions envoyer”;
grille-modèle-colonnes: 45%55%;
grille-template-rows: auto55px;
}
.mise en pageBroadcastAudio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“appareil photo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “historique vidéo”
“actions envoyer”;
grille-modèle-colonnes: 65%35%;
grille-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“vidéo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px45px;
}
.mise en pageCollaborationText {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Onglets”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto45px;
}
.mise en pageWay2 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “caméra vidéo”
“historique vidéo”
“actions envoyer”;
grille-modèle-colonnes: 65%35%;
grille-template-rows: 40%auto45px;
}
.mise en pageWay2Audio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“vidéo”
“appareil photo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto45px45px45px45px;
}
.mise en pageCollaboration {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “onglets vidéo”
“onglets d’actions”;
grille-modèle-colonnes: 65%35%;
grille-template-rows: auto45px;
}
/* Dispositions mobiles */
/* Pour les résolutions inférieures, la vidéo prend toute la largeur et le chat montre ci-dessous */
@media seulement l’écran et (largeur maximale: 1150Px)
{
.layoutBroadcast {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “appareil photo”
“Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto45Epx40px;
}
.layoutPlayback {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto30Epx40px;
}
.mise en pageWay2 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Histoire”
“Envoyer”
“Actions”
“appareil photo”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto25Epx40px25%;
}
.mise en pageCollaboration {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Actions”
“Onglets”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto60px45%;
}
.mise en pageCollaborationText {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Onglets”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto60px;
}
}
/* Pour des résolutions très basses 2 barre d’action lignes */
@media seulement l’écran et (largeur maximale: 800Px)
{
.layoutText {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px90px;
}
.mise en pageCollaborationText {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Onglets”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto90px;
}
.mise en pageWay2Audio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“vidéo”
“appareil photo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px60px90px90px;
}
.mise en pageBroadcastAudio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“appareil photo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”
“vidéo”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “appareil photo”
“Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto35Epx65px;
}
.layoutPlayback {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Histoire”
“Envoyer”
“Actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto30Upx90px;
}
.mise en pageWay2 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Histoire”
“Envoyer”
“Actions”
“appareil photo”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto20Upx90px30%;
}
.mise en pageCollaboration{
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “vidéo”
“Actions”
“Onglets”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto90px40%;
}
}
/* Panneaux/composants */
.layCamera {
position: relative;
zone de grille: appareil photo;
}
.layVideo {
position: relative;
zone de grille: vidéo;
}
.layHistory {
position: relative;
zone de grille: Histoire;
}
.laySend {
position: relative;
zone de grille: Envoyer;
}
.layActions {
position: relative;
zone de grille: Actions;
}
.layTabs {
position: relative;
zone de grille: Onglets;
}
.layMenu {
position: relative;
zone de grille: Menu;
}
.layPane {
position: relative;
zone de grille: Volet;
}
.layChat {
position: relative;
zone de grille: bavarder;
}
.layScalable {
position: relative;
zone de grille: Défilement;
débordement-y: Faire défiler;
}
/* Vues multimédias fractionnées */
.split0 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “médias0”;
grille-modèle-colonnes: 100%;
grille-template-rows: 100%;
}
.splitH2 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “médias0 médias1”;
grille-modèle-colonnes: 50%50%;
grille-template-rows: 100%;
}
.splitV2 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “médias0”
“médias1”;
grille-modèle-colonnes: 100%;
grille-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “médias0 médias1”
“médias2 médias3”;
grille-modèle-colonnes: 50%50%;
grille-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “media0 media1 media2”
“media3 media4 médias5”;
grille-modèle-colonnes: 34%33%33%;
grille-template-rows: 50%50%;
}
.splitV6 {
position: absolute;
afficher: grid;
width: 100%;
height: 100%;
zones de modèle de grille: “médias0 médias1”
“médias2 médias3”
“médias4 médias5”;
grille-modèle-colonnes: 50%50%;
grille-template-rows: 34%33%33%;
}
/* Fentes d’affichage multimédia fractionnées */
.slot0 {
position: relative;
zone de grille: médias0;
}
.slot1 {
position: relative;
zone de grille: médias1;
}
.slot2 {
position: relative;
zone de grille: médias2;
}
.slot3 {
position: relative;
zone de grille: médias3;
}
.slot4 {
position: relative;
zone de grille: médias4;
}
.slot5 {
position: relative;
zone de grille: médias5;
}
