CSS

HTML5 ਵੀਡੀਓਕਾਟ ਐਪ ਲੇਆਉਟ ਦੇ ਤੌਰ ਤੇ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਹਿਲੂ, ਕਸਟਮ ਦੇ ਨਾਲ ਇੰਟਰਫੇਸ CSS. ਇਸ ਵਿੱਚ ਵਧੇਰੇ ਉੱਨਤ ਡਿਜ਼ਾਈਨਰ ਹੁਨਰ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ.

Interface Elements

ਐਪ ਇਹਨਾਂ ਇੰਟਰਫੇਸ ਫਰੇਮਵਰਕ ਦੇ ਤੱਤ ਵਰਤਦਾ ਹੈ:

ਫੋਮੈਟਿਕ UI
ਸਿਮਟੈਂਟ UI ਪ੍ਰਤੀਕਰਮ

Layout

/* ਪੈਨਲ ਲੇਆਉਟ */
.ਖਾਕਾ {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਮੀਨੂ”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “scrollable
“ਮੀਨੂ”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: ਓਹਲੇ;
}
/* App Layouts */
.layoutBroadcast {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਕੈਮਰਾ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਵੀਡੀਓ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਟੈਬਸ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਵੀਡੀਓ”
“ਕੈਮਰਾ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “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: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਕੈਮਰਾ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”
“ਕੈਮਰਾ”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
“ਕਾਰਵਾਈਆਂ”
“ਟੈਬਸ”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਟੈਬਸ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (ਅਧਿਕਤਮ ਚੌੜਾਈ: 800px)
{
.layoutText {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਟੈਬਸ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਵੀਡੀਓ”
“ਕੈਮਰਾ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਕੈਮਰਾ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”
“ਵੀਡੀਓ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਕੈਮਰਾ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈਆਂ”
“ਕੈਮਰਾ”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
“ਕਾਰਵਾਈਆਂ”
“ਟੈਬਸ”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਕੈਮਰਾ;
}
.layVideo {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਵੀਡੀਓ;
}
.layHistory {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: history;
}
.laySend {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਭੇਜਣ;
}
.layActions {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਕਾਰਵਾਈਆਂ;
}
.layTabs {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਟੈਬਸ;
}
.layMenu {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੀਨੂ;
}
.layPane {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: pane;
}
.layChat {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਗੱਲਬਾਤ;
}
.layScrollable {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “media0 media1
“ਮੀਡੀਆ 2 ਮੀਡੀਆ 3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਮੀਡੀਆ 0 ਮੀਡੀਆ 1”
“ਮੀਡੀਆ 3 ਮੀਡੀਆ 4 ਮੀਡੀਆ 5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: grid;
width: 100%;
height: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “media0 media1
“ਮੀਡੀਆ 2 ਮੀਡੀਆ 3”
“ਮੀਡੀਆ 4 ਮੀਡੀਆ 5”;
grid-template-columns: 50%50%;
grid-template-rows: 34%33%33%;
}
/* ਸਪਲਿਟ ਮਲਟੀਮੀਡੀਆ ਵਿ View ਸਲੋਟ */
.ਸਲਾਟ 0 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: media0;
}
.ਨੰਬਰ 1 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: media1;
}
.ਨੰਬਰ 2 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੀਡੀਆ 2;
}
.ਨੰਬਰ 3 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੀਡੀਆ 3;
}
.ਨੰਬਰ 4 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੀਡੀਆ 4;
}
.ਨੰਬਰ 5 {
position: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੀਡੀਆ 5;
}
PS: ਨਵੇਂ ਸੰਸਕਰਣ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਜਾਂ ਨਵੇਂ ਤੱਤ ਹੋ ਸਕਦੇ ਹਨ.

Interface CSS

/* Interface Elements, contained in Controls */
/* ਵੀਡੀਓ */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: ਅਸਲੀ;
width: 100%;
height: 100%;
overflow-y: scroll;
/* ਦੀ ਪਿੱਠਭੂਮੀ-ਰੰਗ: rgb(225, 233, 225); */
ਚਿਣਨ: 0;
ਹਾਸ਼ੀਆ: 0;
}
.chatMessageListul {
list-style-type: ਕਿਸੇ ਨੂੰ ਨਾ ਚੁਣੋ;
}
.chatMessage {
list-style-type: ਕਿਸੇ ਨੂੰ ਨਾ ਚੁਣੋ;
ਪੈਡਿੰਗ-ਸੱਜੇ: 10px;
ਫੋਟ-ਆਕਾਰ: 12px;
ਰੰਗ: #777;
ਫੋਟ-ਭਾਰ: ਆਮ;
}
.chatMessage.dark
{
ਰੰਗ: #FFF;
}
.chatMessage.notification {
ਰੰਗ: #7A7;
ਪਾਠ-ਸੇਧਬੰਧੀ: ਨੂੰ ਛੱਡ;
}
.chatMessage.dark.notification
{
ਰੰਗ: #EFE;
}
.chatMessage.automated {
ਫੋਟ-ਸ਼ੈਲੀ: italic;
ਰੰਗ: #7AA;
ਪਾਠ-ਸੇਧਬੰਧੀ: ਨੂੰ ਛੱਡ;
}
.chatMessage.user {
ਪਾਠ-ਸੇਧਬੰਧੀ: ਨੂੰ ਛੱਡ;
}
.chatMessageimg {
vertical-align: middle;
ਚਿਣਨ: 2px;
}
.chatMessagelabel {
ਡਿਸਪਲੇਅ: ਇਨਲਾਈਨ-ਬਲਾਕ;
ਅਧਿਕਤਮ ਚੌੜਾਈ: 85%;
ਦੀ ਪਿੱਠਭੂਮੀ-ਰੰਗ: ਚਿੱਟੇ;
ਸਰਹੱਦ-ਘੇਰੇ: 5px;
ਚਿਣਨ: 5px;
ਹਾਸ਼ੀਆ: 2px;
}
.chatMessage.darklabel{
ਦੀ ਪਿੱਠਭੂਮੀ-ਰੰਗ: #111;
}
.chatMessage.userstrong {
ਡਿਸਪਲੇਅ: ਇਨਲਾਈਨ-ਬਲਾਕ;
ਫੋਟ-ਆਕਾਰ: 11px;
ਚਿਣਨ: 3px;
ਫੋਟ-ਭਾਰ: ਆਮ;
}
.chatMessage.useri {
ਫੋਟ-ਆਕਾਰ: 10px;
ਚਿਣਨ: 3px;
}
.chatMessage.user.own {
ਪਾਠ-ਸੇਧਬੰਧੀ: ਸੱਜੇ;
}