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: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Menü”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “scrollable
“Menü”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: gizli;
}
/* App Layouts */
.layoutBroadcast {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Kamera”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Video”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Video”
“Kamera”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 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 (maksimum genişlik: 1150PX)
{
.layoutBroadcast {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Kamera”
history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
history
“Gönder”
actions
“Kamera”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 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 (maksimum genişlik: 800PX)
{
.layoutText {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Video”
“Kamera”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Kamera”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “history
“Gönder”
“Video”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Kamera”
history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
history
“Gönder”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
history
“Gönder”
actions
“Kamera”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “Video”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: göreli;
grid-area: Kamera;
}
.layVideo {
position: göreli;
grid-area: Video;
}
.layHistory {
position: göreli;
grid-area: history;
}
.laySend {
position: göreli;
grid-area: Gönder;
}
.layActions {
position: göreli;
grid-area: actions;
}
.layTabs {
position: göreli;
grid-area: tabs;
}
.layMenu {
position: göreli;
grid-area: Menü;
}
.layPane {
position: göreli;
grid-area: pane;
}
.layChat {
position: göreli;
grid-area: sohbet;
}
.layScrollable {
position: göreli;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: mutlak;
görüntü: grid;
Genişlik: 100%;
Yükseklik: 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: göreli;
grid-area: media0;
}
.slot1 {
position: göreli;
grid-area: media1;
}
.slot2 {
position: göreli;
grid-area: media2;
}
.slot3 {
position: göreli;
grid-area: media3;
}
.slot4 {
position: göreli;
grid-area: media4;
}
.slot5 {
position: göreli;
grid-area: media5;
}
PS: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* Videolar */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: mutlak;
Genişlik: 100%;
Yükseklik: 100%;
overflow-y: scroll;
/* background-color: rgb(225, 233, 225); */
padding: 0;
kenar boşluğu: 0;
}
.chatMessageListul {
list-style-type: yok;
}
.chatMessage {
list-style-type: yok;
padding-right: 10PX;
font-size: 12PX;
Renk: #777;
font-weight: normal;
}
.chatMessage.dark
{
Renk: #FFF;
}
.chatMessage.notification {
Renk: #7A7;
text-align: sol;
}
.chatMessage.dark.notification
{
Renk: #EFE;
}
.chatMessage.automated {
yazı tipi stili: italic;
Renk: #7AA;
text-align: sol;
}
.chatMessage.user {
text-align: sol;
}
.chatMessageimg {
vertical-align: middle;
padding: 2PX;
}
.chatMessagelabel {
görüntü: satır içi-blok;
maksimum genişlik: 85%;
background-color: white;
Kenarlık-RADIUS: 5PX;
padding: 5PX;
kenar boşluğu: 2PX;
}
.chatMessage.darklabel{
background-color: #111;
}
.chatMessage.userstrong {
görüntü: satır içi-blok;
font-size: 11PX;
padding: 3PX;
font-weight: normal;
}
.chatMessage.useri {
font-size: 10PX;
padding: 3PX;
}
.chatMessage.user.own {
text-align: sağ;
}