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: “menu
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
menu”;
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
“Αποστολή”
“Κάμερα”
actions”;
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
“Αποστολή”
“βίντεο”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
actions”;
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
“Αποστολή”
“βίντεο”
“Κάμερα”
actions”;
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
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
actions
“Κάμερα”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
actions
“Καρτέλες”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
actions”;
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
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Καρτέλες”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
“Κάμερα”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“Κάμερα”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“Αποστολή”
“βίντεο”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “Κάμερα”
history
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
history
“Αποστολή”
actions
“Κάμερα”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
θέση: absolute;
οθόνη: grid;
width: 100%;
height: 100%;
grid-template-areas: “βίντεο”
actions
“Καρτέλες”;
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: actions;
}
.layTabs {
θέση: σχετική;
grid-area: Καρτέλες;
}
.layMenu {
θέση: σχετική;
grid-area: menu;
}
.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;
}