fbpx

सीएसएस

The HTML5 Videochat app can be customizes as layout, aspect, interface with custom सीएसएस. 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: “टैब”
“कार्यों”;
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 (max-width: 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: “वीडियो”
“कार्यों”
“टैब”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: 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 (max-width: 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: “टैब”
“कार्यों”;
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: “वीडियो”
“कार्यों”
“टैब”;
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: टैब;
}
.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: कोई नहीं;
}
.chatMessage {
list-style-type: कोई नहीं;
पैडिंग-राइट: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
text-align: left;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: italic;
color: #7AA;
text-align: left;
}
.chatMessage.user {
text-align: left;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
प्रदर्शन: inline-block;
max-width: 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;
}