fbpx

CSS

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

Interface Elements

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

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

Layout

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

Interface CSS

/* Interface Elements, contained in Controls */
/* ਵੀਡੀਓ */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
ਸਥਿਤੀ: ਅਸਲੀ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 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 {
ਪਾਠ-ਸੇਧਬੰਧੀ: ਸੱਜੇ;
}