Die HTML5 Videochat App kann als Layout angepasst werden, Aspekt, Schnittstelle mit benutzerdefinierten Css. Dies beinhaltet fortgeschrittenere Designer-Fähigkeiten.
Schnittstellenelemente
App verwendet Elemente aus diesen Schnittstellenframeworks:
Css
Layout
/* Panel-Layouts */
.layoutChat {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Menü”
“Bereich”;
Grid-Template-Spalten: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Bildlauffähigen”
“Menü”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Bildlauffähigen”;
Grid-Template-Spalten: 100%;
grid-template-rows: 100%;
}
.paneAktiv
{
Sichtbarkeit: Sichtbar;
}
.paneInaktiv
{
Sichtbarkeit: Versteckte;
}
/* App-Layouts */
.layoutBroadcast {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Kamerageschichte”
“Aktionen senden”;
Grid-Template-Spalten: 45%55%;
grid-template-rows: auto55px;
}
.LayoutBroadcastAudio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Kamera”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px45px45px;
}
.LayoutPlayback {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Videoverlauf”
“Aktionen senden”;
Grid-Template-Spalten: 65%35%;
grid-template-rows: auto55px;
}
.LayoutPlaybackAudio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Video”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px45px;
}
.layoutKolonentext {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Registerkarten”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Videokamera”
“Videoverlauf”
“Aktionen senden”;
Grid-Template-Spalten: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Video”
“Kamera”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutZusammenarbeit {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video-Tabs”
“Aktionsregisterkarten”;
Grid-Template-Spalten: 65%35%;
grid-template-rows: auto45px;
}
/* Mobile Layouts */
/* Für niedrigere Auflösungen Video nimmt volle Breite und Chat-Shows unten */
@media nur Bildschirm und (max-breite: 1150Pixel)
{
.layoutBroadcast {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Kamera”
“Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto45Epx40px;
}
.LayoutPlayback {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto30Epx40px;
}
.layoutWay2 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Geschichte”
“Senden”
“Aktionen”
“Kamera”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto25Epx40px25%;
}
.layoutZusammenarbeit {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Aktionen”
“Registerkarten”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto60px45%;
}
.layoutKolonentext {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Registerkarten”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto60px;
}
}
/* Für sehr niedrige Auflösungen 2 Zeilen-Aktionsleiste */
@media nur Bildschirm und (max-breite: 800Pixel)
{
.layoutText {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px90px;
}
.layoutKolonentext {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Registerkarten”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Video”
“Kamera”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px60px90px90px;
}
.LayoutBroadcastAudio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Kamera”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px90px65px;
}
.LayoutPlaybackAudio {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Geschichte”
“Senden”
“Video”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Kamera”
“Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto35Epx65px;
}
.LayoutPlayback {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Geschichte”
“Senden”
“Aktionen”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto30Upx90px;
}
.layoutWay2 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Geschichte”
“Senden”
“Aktionen”
“Kamera”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto20Upx90px30%;
}
.layoutZusammenarbeit{
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “Video”
“Aktionen”
“Registerkarten”;
Grid-Template-Spalten: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Komponenten */
.layKamera {
position: Relative;
Netzbereich: Kamera;
}
.layVideo {
position: Relative;
Netzbereich: Video;
}
.layGeschichte {
position: Relative;
Netzbereich: Geschichte;
}
.laySend {
position: Relative;
Netzbereich: Senden;
}
.layActions {
position: Relative;
Netzbereich: Aktionen;
}
.layTabs {
position: Relative;
Netzbereich: Registerkarten;
}
.layMenu {
position: Relative;
Netzbereich: Menü;
}
.layPane {
position: Relative;
Netzbereich: Bereich;
}
.layChat {
position: Relative;
Netzbereich: plaudern;
}
.layScrollable {
position: Relative;
Netzbereich: Bildlauffähigen;
überlaufen-y: Blättern;
}
/* Geteilte Multimedia-Ansichten */
.split0 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0”;
Grid-Template-Spalten: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0 media1”;
Grid-Template-Spalten: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0”
“media1”;
Grid-Template-Spalten: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0 media1”
“media2 media3”;
Grid-Template-Spalten: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0 media1 media2”
“media3 media4 media5”;
Grid-Template-Spalten: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: Absolut;
ausstellen: grid;
width: 100%;
Höhe: 100%;
Grid-Template-Bereiche: “media0 media1”
“media2 media3”
“media4 media5”;
Grid-Template-Spalten: 50%50%;
grid-template-rows: 34%33%33%;
}
/* Split Multimedia View Slots */
.steckplatz0 {
position: Relative;
Netzbereich: media0;
}
.Steckplatz1 {
position: Relative;
Netzbereich: media1;
}
.steckplatz2 {
position: Relative;
Netzbereich: media2;
}
.Steckplatz3 {
position: Relative;
Netzbereich: media3;
}
.steckplatz4 {
position: Relative;
Netzbereich: media4;
}
.Steckplatz5 {
position: Relative;
Netzbereich: media5;
}
PS: Neueste Version kann Änderungen oder neue Elemente haben.
Schnittstelle CSS
/* Schnittstellenelemente, in Controls enthalten */
/* Videos */
.localVideo
{
}
.localVideoPlay
{
}
/* Geschichte */
.chatMessageList {
position: Absolut;
width: 100%;
Höhe: 100%;
überlaufen-y: Blättern;
/* Hintergrundfarbe: Rgb(225, 233, 225); */
padding: 0;
Rand: 0;
}
.chatMessageListul {
List-Style-Typ: keiner;
}
.chatMessage {
List-Style-Typ: keiner;
Polsterung-rechts: 10Pixel;
font-size: 12Pixel;
Farbe: #777;
Font-Gewicht: normale;
}
.chatMessage.dark
{
Farbe: #Fff;
}
.chatMessage.notification {
Farbe: #7A7;
Ausrichten von Text: Links;
}
.chatMessage.dark.notification
{
Farbe: #Efe;
}
.chatMessage.automated {
Schriftschnitt: Italic;
Farbe: #7Aa;
Ausrichten von Text: Links;
}
.chatMessage.user {
Ausrichten von Text: Links;
}
.chatMessageimg {
vertikal ausrichtend: Mitte;
padding: 2Pixel;
}
.chatMessagelabel {
ausstellen: Inline-Block;
max-breite: 85%;
Hintergrundfarbe: Weiß;
Border-radius: 5Pixel;
padding: 5Pixel;
Rand: 2Pixel;
}
.chatMessage.darklabel{
Hintergrundfarbe: #111;
}
.chatMessage.userstrong {
ausstellen: Inline-Block;
font-size: 11Pixel;
padding: 3Pixel;
Font-Gewicht: normale;
}
.chatMessage.useri {
font-size: 10Pixel;
padding: 3Pixel;
}
.chatMessage.user.own {
Ausrichten von Text: Rechts;
}
