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: “תפריט”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
“תפריט”;
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
“שלח”
“מצלמה”
“פעולות”;
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
“שלח”
“וידאו”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
“פעולות”;
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
“שלח”
“וידאו”
“מצלמה”
“פעולות”;
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
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
“פעולות”
“מצלמה”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
“פעולות”
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
“פעולות”;
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
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “tabs
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
“מצלמה”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“מצלמה”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“שלח”
“וידאו”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “מצלמה”
history
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
“פעולות”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
history
“שלח”
“פעולות”
“מצלמה”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
הציג: grid;
width: 100%;
height: 100%;
grid-template-areas: “וידאו”
“פעולות”
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: פעולות;
}
.layTabs {
position: relative;
grid-area: tabs;
}
.layMenu {
position: relative;
grid-area: תפריט;
}
.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;
}