CSS

Is féidir an aip HTML5 Videochat a shaincheapadh mar leagan amach, gné, comhéadan le saincheaptha CSS. Tá scileanna dearthóra níos airde i gceist leis seo.

Interface Elements

Úsáideann App eilimintí ó na creataí comhéadain seo:

Chomhéadain mhaisiúil
Imoibriú Chomhéadain Séimeantach

Layout

/* Leagan Amach an Phainéil */
.leagan amachChat {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto60px;
}
.leagan amachTabs {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “roghchlár”
“pána”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: 45pxauto;
}
.leagan amachList {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “scrollable”
“roghchlár”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: uathoibríoch 45px;
}
.leagan amachScrollable {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “scrollable”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: 100%;
}
.paneActive
{
}
.paneInactive
{
infheictheacht: bhfolach;
}
/* Leagan Amach an Aip */
.leagan amachBroadcast {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair ceamara”
“seolfaidh caingne”;
colún greille-teimpléad: 45%55%;
sraitheanna greille-teimpléad: auto45px;
}
.leagan amachPlayback {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair na bhfíseán”
“seolfaidh caingne”;
colún greille-teimpléad: 65%35%;
sraitheanna greille-teimpléad: auto45px;
}
.leagan amachWay2 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físcheamara”
“stair na bhfíseán”
“seolfaidh caingne”;
colún greille-teimpléad: 65%35%;
sraitheanna greille-teimpléad: 40%auto45px;
}
.leagan amachCollaboration {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “cluaisíní físe”
“cluaisíní gníomhartha”;
colún greille-teimpléad: 65%35%;
sraitheanna greille-teimpléad: auto45px;
}
/* Leaganacha Soghluaiste */
/* Le haghaidh rúin níos ísle tógann físeán leithead iomlán agus seónna comhrá thíos */
scáileán @media agus (max-leithead: 1150px)
{
.leagan amachBroadcast {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “ceamara”
“stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto45%45px40px;
}
.leagan amachPlayback {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto30%45px40px;
}
.leagan amachWay2 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“stair”
“seol”
“caingne”
“ceamara”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto25%45px40px25%;
}
.leagan amachCollaboration {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“caingne”
“cluaisíní”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto45px45%;
}
}
/* Le haghaidh rúin an-íseal 2 barraí gníomhaíochta sraitheanna */
scáileán @media agus (max-leithead: 800px)
{
.leagan amachBroadcast {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “ceamara”
“stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto35%45px80px;
}
.leagan amachPlayback {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto30%45px80px;
}
.leagan amachWay2 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“stair”
“seol”
“caingne”
“ceamara”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto25%45px80px25%;
}
.leagan amachCollaboration {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “físeán”
“caingne”
“cluaisíní”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto80px40%;
}
}
/* Painéil / Comhpháirteanna */
.layCamera {
post: gaol;
limistéar greille: ceamara;
}
.layVideo {
post: gaol;
limistéar greille: físeán;
}
.tuataHistory {
post: gaol;
limistéar greille: stair;
}
.laySend {
post: gaol;
limistéar greille: seol;
}
.layActions {
post: gaol;
limistéar greille: caingne;
}
.layTabs {
post: gaol;
limistéar greille: cluaisíní;
}
.layMenu {
post: gaol;
limistéar greille: roghchlár;
}
.layPane {
post: gaol;
limistéar greille: pána;
}
.tuataScrollable {
post: gaol;
limistéar greille: scrollable;
thar maoil-y: scrollaigh;
}
/* Scoilt Radhairc Ilmheáin */
.scoilt0 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: 100%;
}
.scoiltH2 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0 meáin1”;
colún greille-teimpléad: 50%50%;
sraitheanna greille-teimpléad: 100%;
}
.scoiltV2 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0”
“meáin 1”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: 50%50%;
}
.scoiltH4, .scoiltV4 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0 meáin1”
“meáin2 meáin3”;
colún greille-teimpléad: 50%50%;
sraitheanna greille-teimpléad: 50%50%;
}
.scoiltH6 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0 meáin1 meáin2”
“meáin3 meáin4 meáin5”;
colún greille-teimpléad: 34%33%33%;
sraitheanna greille-teimpléad: 50%50%;
}
.scoiltV6 {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “meáin0 meáin1”
“meáin2 meáin3”
“meáin4 meáin5”;
colún greille-teimpléad: 50%50%;
sraitheanna greille-teimpléad: 34%33%33%;
}
/* Scoilt Sliotáin Amharc Ilmheáin */
.sliotán0 {
post: gaol;
limistéar greille: meáin0;
}
.sliotán1 {
post: gaol;
limistéar greille: meáin 1;
}
.sliotán2 {
post: gaol;
limistéar greille: meáin2;
}
.sliotán3 {
post: gaol;
limistéar greille: meáin3;
}
.sliotán 4 {
post: gaol;
limistéar greille: meáin4;
}
.sliotán5 {
post: gaol;
limistéar greille: meáin5;
}
PS: D’fhéadfadh go mbeadh athruithe nó eilimintí nua sa leagan is déanaí.