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 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Μενού”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
“Μενού”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: κρυφό;
}
/* App Layouts */
.layoutBroadcast {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“Κάμερα”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
θέση: 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 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
“Κάμερα”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
θέση: 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 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Κάμερα”
history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
“Ενέργειες”
“Κάμερα”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
“Ενέργειες”
“Καρτέλες”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (μέγιστο πλάτος: 800px)
{
.layoutText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
“Κάμερα”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“Κάμερα”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Κάμερα”
history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
“Ενέργειες”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
“Ενέργειες”
“Κάμερα”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
“Ενέργειες”
“Καρτέλες”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
θέση: σχετική;
grid-area: Κάμερα;
}
.layVideo {
θέση: σχετική;
grid-area: βίντεο;
}
.layHistory {
θέση: σχετική;
grid-area: history;
}
.laySend {
θέση: σχετική;
grid-area: Αποστολή;
}
.layActions {
θέση: σχετική;
grid-area: Ενέργειες;
}
.layTabs {
θέση: σχετική;
grid-area: Καρτέλες;
}
.layMenu {
θέση: σχετική;
grid-area: Μενού;
}
.layPane {
θέση: σχετική;
grid-area: pane;
}
.layChat {
θέση: σχετική;
grid-area: συνομιλία;
}
.layScrollable {
θέση: σχετική;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
θέση: 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 {
θέση: 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 {
θέση: σχετική;
grid-area: media0;
}
.slot1 {
θέση: σχετική;
grid-area: media1;
}
.slot2 {
θέση: σχετική;
grid-area: media2;
}
.slot3 {
θέση: σχετική;
grid-area: media3;
}
.slot4 {
θέση: σχετική;
grid-area: media4;
}
.slot5 {
θέση: σχετική;
grid-area: media5;
}
Ps: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Βίντεο */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
θέση: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* χρώμα φόντου: rgb(225, 233, 225); */
σουτιέν με βάτες: 0;
margin: 0;
}
.chatMessageListul {
list-style-type: κανένας;
}
.chatMessage {
list-style-type: κανένας;
Αναπλήρωση δεξιά: 10px;
font-size: 12px;
color: #777;
πάχος γραμματοσειράς: κανονική;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
Στοίχιση κειμένου: αριστερά;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
στυλ γραμματοσειράς: italic;
color: #7AA;
Στοίχιση κειμένου: αριστερά;
}
.chatMessage.user {
Στοίχιση κειμένου: αριστερά;
}
.chatMessageimg {
vertical-align: middle;
σουτιέν με βάτες: 2px;
}
.chatMessagelabel {
οθόνη: inline-μπλοκ;
μέγιστο πλάτος: 85%;
χρώμα φόντου: white;
συνοριακές ακτίνα: 5px;
σουτιέν με βάτες: 5px;
margin: 2px;
}
.chatMessage.darklabel{
χρώμα φόντου: #111;
}
.chatMessage.userstrong {
οθόνη: inline-μπλοκ;
font-size: 11px;
σουτιέν με βάτες: 3px;
πάχος γραμματοσειράς: κανονική;
}
.chatMessage.useri {
font-size: 10px;
σουτιέν με βάτες: 3px;
}
.chatMessage.user.own {
Στοίχιση κειμένου: right;
}