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 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “menu
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
menu”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: hidden;
}
/* App Layouts */
.layoutBroadcast {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“מצלמה”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
“מצלמה”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
הציג: 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 */
@media only screen and (רוחב מירבי: 1150px)
{
.layoutBroadcast {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “מצלמה”
history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
actions
“מצלמה”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (רוחב מירבי: 800px)
{
.layoutText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
“מצלמה”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“מצלמה”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “מצלמה”
history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
actions
“מצלמה”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: relative;
grid-area: מצלמה;
}
.layVideo {
position: relative;
grid-area: וידאו;
}
.layHistory {
position: relative;
grid-area: history;
}
.laySend {
position: relative;
grid-area: שלח;
}
.layActions {
position: relative;
grid-area: actions;
}
.layTabs {
position: relative;
grid-area: tabs;
}
.layMenu {
position: relative;
grid-area: menu;
}
.layPane {
position: relative;
grid-area: pane;
}
.layChat {
position: relative;
grid-area: צ 'אט;
}
.layScrollable {
position: relative;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
הציג: 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;
הציג: 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;
הציג: 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;
}
נ.: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* קטעי וידאו */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* צבע רקע: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
list-style-type: none;
}
.chatMessage {
list-style-type: none;
ריווח ימינה: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
text-align: שמאל;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: italic;
color: #7AA;
text-align: שמאל;
}
.chatMessage.user {
text-align: שמאל;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
הציג: inline-block;
רוחב מירבי: 85%;
צבע רקע: white;
רדיוס גבול: 5px;
padding: 5px;
margin: 2px;
}
.chatMessage.darklabel{
צבע רקע: #111;
}
.chatMessage.userstrong {
הציג: inline-block;
font-size: 11px;
padding: 3px;
font-weight: normal;
}
.chatMessage.useri {
font-size: 10px;
padding: 3px;
}
.chatMessage.user.own {
text-align: right;
}