fbpx

CSS

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

Eilimintí Comhéadain

App uses elements from these interface frameworks:

Fomantic UI
Semantic UI React

If theme overwrites styling for some of the classes, is féidir le do dhearthóir cód CSS breise a chur leis le socrú. Nó díreach stílithe saincheaptha a chur leis chun téama an láithreáin a mheaitseáil.
Mar shampla le haghaidh “.cnaipe”, is féidir cód a chur leis “.ui.button” stíliú áirithe a shaincheapadh le “important!” .

App Saincheaptha CSS

Féadfaidh an cód seo a bheith as dáta le leaganacha deireanacha, ach liostaíonn sé na príomhghnéithe is féidir leat a shaincheapadh:

Leagan Amach

/* Panel Layouts */
.layoutChat {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “menu
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
menu”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: infheicthe;
}
.paneInactive
{
visibility: hidden;
}
/* App Layouts */
.layoutBroadcast {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.leagan amachBroadcastAudio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“ceamara”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.leagan amachPlaybackAudio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“físeán”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.leagan amachText {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.leagan amachCollaborationText {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “cluaisíní”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.leagan amachWay2Audio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“físeán”
“ceamara”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
taispeáint: grid;
width: 100%;
height: 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 */
scáileán @media amháin agus (max-width: 1150px)
{
.layoutBroadcast {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “ceamara”
history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
history
“seol”
actions
“ceamara”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
actions
“cluaisíní”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.leagan amachCollaborationText {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “cluaisíní”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
scáileán @media amháin agus (max-width: 800px)
{
.leagan amachText {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.leagan amachCollaborationText {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “cluaisíní”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.leagan amachWay2Audio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“físeán”
“ceamara”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.leagan amachBroadcastAudio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“ceamara”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.leagan amachPlaybackAudio {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“seol”
“físeán”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “ceamara”
history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
history
“seol”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
history
“seol”
actions
“ceamara”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “físeán”
actions
“cluaisíní”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: relative;
grid-area: ceamara;
}
.layVideo {
position: relative;
grid-area: físeán;
}
.layHistory {
position: relative;
grid-area: history;
}
.laySend {
position: relative;
grid-area: seol;
}
.layActions {
position: relative;
grid-area: actions;
}
.layTabs {
position: relative;
grid-area: cluaisíní;
}
.layMenu {
position: relative;
grid-area: menu;
}
.layPane {
position: relative;
grid-area: pane;
}
.tuataChat {
position: relative;
grid-area: comhrá;
}
.layScrollable {
position: relative;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: absolute;
taispeáint: grid;
width: 100%;
height: 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 {
position: relative;
grid-area: media0;
}
.slot1 {
position: relative;
grid-area: media1;
}
.slot2 {
position: relative;
grid-area: media2;
}
.slot3 {
position: relative;
grid-area: media3;
}
.slot4 {
position: relative;
grid-area: media4;
}
.slot5 {
position: relative;
grid-area: media5;
}
PS: Latest version may have changes or new elements.

Comhéadan CSS

/* Eilimintí Comhéadain, atá i Rialuithe */
/* Físeáin */
.locationvideo
{
}
.áitiúilVideoPlay
{
}
/* Stair */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
cineál liosta-liosta: none;
}
.chatMessage {
cineál liosta-liosta: none;
padding-right: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
text-align: ar chlé;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: iodálach;
color: #7AA;
text-align: ar chlé;
}
.chatMessage.user {
text-align: ar chlé;
}
.chatMessageimg {
ingearach-ailíniú: lár;
padding: 2px;
}
.chatMessagelabel {
taispeáint: inline-block;
max-width: 85%;
background-color: white;
border-radius: 5px;
padding: 5px;
margin: 2px;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
taispeáint: inline-block;
font-size: 11px;
padding: 3px;
font-weight: normal;
}
.chatMessage.useri {
font-size: 10px;
padding: 3px;
}
.chatMessage.user.own {
text-align: right;
}