fbpx

CSS

L’application HTML5 Videochat peut être personnalise en tant que mise en page, Aspect, interface avec personnalisé CSS. Cela implique des compétences de concepteur plus avancées.

Éléments d’interface

App utilise des éléments de ces cadres d’interface:

Interface utilisateur fomantique
L’interface utilisateur sémantique réagissez

Disposition

/* Dispositions du panneau */
.layoutChat {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 100%;
zones de modèle de grille: “Histoire”
“Envoyer”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto60px;
}
.layoutTabs {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 100%;
zones de modèle de grille: “Menu”
“Volet”;
grille-modèle-colonnes: 100%;
grille-template-rows: 45pxauto;
}
.layoutList {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 100%;
zones de modèle de grille: “Onglets”
actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto45px;
}
.mise en pageWay2 {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 100%;
zones de modèle de grille: “Onglets”
actions”;
grille-modèle-colonnes: 100%;
grille-template-rows: auto90px;
}
.mise en pageWay2Audio {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 100%;
zones de modèle de grille: “médias0”;
grille-modèle-colonnes: 100%;
grille-template-rows: 100%;
}
.splitH2 {
Position: absolute;
afficher: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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: Grille;
width: 100%;
hauteur: 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;
}
PS: La dernière version peut avoir des modifications ou de nouveaux éléments.

Interface CSS

/* Éléments d’interface, contenu dans Controls */
/* Vidéos */
.localVideo
{
}
.localVideoPlay
{
}
/* Histoire */
.chatMessageList {
Position: absolute;
width: 100%;
hauteur: 100%;
débordement-y: Faire défiler;
/* background-color: Rvb(225, 233, 225); */
rembourrage: 0;
marge de: 0;
}
.chatMessageListul {
type de liste: aucun;
}
.chatMessage {
type de liste: aucun;
rembourrage-droit: 10PX;
la taille de police: 12PX;
couleur: #777;
font-weight: normal;
}
.chatMessage.dark
{
couleur: #FFF;
}
.chatMessage.notification {
couleur: #7A7;
text-align: Gauche;
}
.chatMessage.dark.notification
{
couleur: #Efe;
}
.chatMessage.automated {
style de police: Italique;
couleur: #7Aa;
text-align: Gauche;
}
.chatMessage.user {
text-align: Gauche;
}
.chatMessageimg {
alignement vertical: Milieu;
rembourrage: 2PX;
}
.chatMessagelabel {
afficher: Inline-block;
largeur maximale: 85%;
background-color: white;
border-radius: 5PX;
rembourrage: 5PX;
marge de: 2PX;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
afficher: Inline-block;
la taille de police: 11PX;
rembourrage: 3PX;
font-weight: normal;
}
.chatMessage.useri {
la taille de police: 10PX;
rembourrage: 3PX;
}
.chatMessage.user.own {
text-align: droit;
}