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
{
infheictheacht: visible;
}
.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: auto55px;
}
.layoutBroadcastAudio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“ceamara”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px45px45px;
}
.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: auto55px;
}
.layoutPlaybackAudio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“físeán”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px45px45px;
}
.layoutText {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px45px;
}
.layoutCollaborationText {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “cluaisíní”
“caingne”;
colún greille-teimpléad: 100%;
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;
}
.layoutWay2Audio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“físeán”
“ceamara”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto45px45px45px45px;
}
.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 */
@media only screen and (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: auto60px45%;
}
.layoutCollaborationText {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “cluaisíní”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto60px;
}
}
/* Le haghaidh rúin an-íseal 2 barraí gníomhaíochta sraitheanna */
@media only screen and (max-leithead: 800px)
{
.layoutText {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px90px;
}
.layoutCollaborationText {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “cluaisíní”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto90px;
}
.layoutWay2Audio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“físeán”
“ceamara”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px60px90px90px;
}
.layoutBroadcastAudio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“ceamara”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px90px65px;
}
.layoutPlaybackAudio {
post: absalóideach;
taispeáint: greille;
leithead: 100%;
airde: 100%;
réimsí greille-teimpléid: “stair”
“seol”
“físeán”
“caingne”;
colún greille-teimpléad: 100%;
sraitheanna greille-teimpléad: auto55px60px90px;
}
.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%45px65px;
}
.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%55px90px;
}
.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: auto20%55px90px30%;
}
.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: auto90px40%;
}
}
/* 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;
}
.layChat {
post: gaol;
limistéar greille: comhrá;
}
.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í.

Interface CSS

/* Interface Elements, contained in Controls */
/* Físeáin */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
post: absalóideach;
leithead: 100%;
airde: 100%;
thar maoil-y: scrollaigh;
/* cúlra-dath: rgb(225, 233, 225); */
stuáil: 0;
corrlach: 0;
}
.chatMessageListul {
list-style-type: none;
}
.chatMessage {
list-style-type: none;
stuáil-dheis: 10px;
méid cló: 12px;
dath: #777;
font-mheáchan: gnáth;
}
.chatMessage.dark
{
dath: #fff;
}
.chatMessage.notification {
dath: #7A7;
téacs-ailíniú: chlé;
}
.chatMessage.dark.notification
{
dath: #EFE;
}
.chatMessage.automated {
font-stíl: italic;
dath: #7AA;
téacs-ailíniú: chlé;
}
.chatMessage.user {
téacs-ailíniú: chlé;
}
.chatMessageimg {
vertical-align: middle;
stuáil: 2px;
}
.chatMessagelabel {
taispeáint: inlíne-bloc;
max-leithead: 85%;
cúlra-dath: bán;
teorann-ga: 5px;
stuáil: 5px;
corrlach: 2px;
}
.chatMessage.darklabel{
cúlra-dath: #111;
}
.chatMessage.userstrong {
taispeáint: inlíne-bloc;
méid cló: 11px;
stuáil: 3px;
font-mheáchan: gnáth;
}
.chatMessage.useri {
méid cló: 10px;
stuáil: 3px;
}
.chatMessage.user.own {
téacs-ailíniú: ceart;
}