fbpx

CSS

The HTML5 Videochat app can be customizes as layout, aspect, interface with custom CSS. This involves more advanced designer skills.

Interface Elements

App uses elements from these interface frameworks:

Fomantic UI
Semantic UI React

Layout

/* Panel Layouts */
.layoutChat {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Meniul”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “scrollable
“Meniul”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: ascunse;
}
/* App Layouts */
.layoutBroadcast {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“camera”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“Pagina”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “tabs
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“Pagina”
“camera”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “video tabs
actions tabs”;
grid-template-columns: 65%35%;
grid-template-rows: auto45px;
}
/* Mobile Layouts */
/* For lower resolutions video takes full width and chat shows below */
@media only screen and (lățime maximă: 1150px)
{
.layoutBroadcast {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “camera”
history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
history
“Trimite”
“acţiunile”
“camera”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
“acţiunile”
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “tabs
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (lățime maximă: 800px)
{
.layoutText {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “tabs
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“Pagina”
“camera”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“camera”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “history
“Trimite”
“Pagina”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “camera”
history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
history
“Trimite”
“acţiunile”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
history
“Trimite”
“acţiunile”
“camera”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “Pagina”
“acţiunile”
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
poziţia: relativă;
grid-area: camera;
}
.layVideo {
poziţia: relativă;
grid-area: Pagina;
}
.layHistory {
poziţia: relativă;
grid-area: history;
}
.laySend {
poziţia: relativă;
grid-area: Trimite;
}
.layActions {
poziţia: relativă;
grid-area: acţiunile;
}
.layTabs {
poziţia: relativă;
grid-area: tabs;
}
.layMenu {
poziţia: relativă;
grid-area: Meniul;
}
.layPane {
poziţia: relativă;
grid-area: pane;
}
.layChat {
poziţia: relativă;
grid-area: chat-ul;
}
.layScrollable {
poziţia: relativă;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
poziţia: absolută;
Afişare: grid;
Lăţime: 100%;
Înălţimea: 100%;
grid-template-areas: “media0 media1
media2 media3
media4 media5”;
grid-template-columns: 50%50%;
grid-template-rows: 34%33%33%;
}
/* Split Multimedia View Slots */
.slot0 {
poziţia: relativă;
grid-area: media0;
}
.slot1 {
poziţia: relativă;
grid-area: media1;
}
.slot2 {
poziţia: relativă;
grid-area: media2;
}
.slot3 {
poziţia: relativă;
grid-area: media3;
}
.slot4 {
poziţia: relativă;
grid-area: media4;
}
.slot5 {
poziţia: relativă;
grid-area: media5;
}
PS: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Clipuri video */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
poziţia: absolută;
Lăţime: 100%;
Înălţimea: 100%;
overflow-y: scroll;
/* culoarea de fundal: rgb(225, 233, 225); */
umplutură: 0;
marja: 0;
}
.chatMessageListul {
list-style-type: Nici unul;
}
.chatMessage {
list-style-type: Nici unul;
padding-right: 10px;
dimensiunea fontului: 12px;
culoare: #777;
Font-greutate: normală;
}
.chatMessage.dark
{
culoare: #FFF;
}
.chatMessage.notification {
culoare: #7A7;
Aliniere text: stânga;
}
.chatMessage.dark.notification
{
culoare: #EFE;
}
.chatMessage.automated {
stilul de font: italic;
culoare: #7AA;
Aliniere text: stânga;
}
.chatMessage.user {
Aliniere text: stânga;
}
.chatMessageimg {
vertical-align: middle;
umplutură: 2px;
}
.chatMessagelabel {
Afişare: inline-bloc;
lățime maximă: 85%;
culoarea de fundal: white;
raza de frontieră: 5px;
umplutură: 5px;
marja: 2px;
}
.chatMessage.darklabel{
culoarea de fundal: #111;
}
.chatMessage.userstrong {
Afişare: inline-bloc;
dimensiunea fontului: 11px;
umplutură: 3px;
Font-greutate: normală;
}
.chatMessage.useri {
dimensiunea fontului: 10px;
umplutură: 3px;
}
.chatMessage.user.own {
Aliniere text: dreptul de;
}