CSS

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

Interface Elements

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

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

Layout

/* ਪੈਨਲ ਲੇਆਉਟ */
.ਖਾਕਾ {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “history
“ਭੇਜਣ”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਮੇਨੂ”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “scrollable
“ਮੇਨੂ”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
}
.paneInactive
{
visibility: ਓਹਲੇ;
}
/* App Layouts */
.layoutBroadcast {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto45px;
}
.layoutPlayback {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto45px;
}
.layoutWay2 {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.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 screen and (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 1150px)
{
.layoutBroadcast {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਕੈਮਰਾ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”
“ਕੈਮਰਾ”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
“ਕਾਰਵਾਈ”
“ਟੈਬਸ”;
grid-template-columns: 100%;
grid-template-rows: auto45px45%;
}
}
/* For very low resolutions 2 rows action bar */
@media screen and (ਅਧਿਕਤਮ-ਚੌੜਾਈ: 800px)
{
.layoutBroadcast {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਕੈਮਰਾ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px80px;
}
.layoutPlayback {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px80px;
}
.layoutWay2 {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
history
“ਭੇਜਣ”
“ਕਾਰਵਾਈ”
“ਕੈਮਰਾ”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px80px25%;
}
.layoutCollaboration {
ਸਥਿਤੀ: ਅਸਲੀ;
ਡਿਸਪਲੇਅ: ਗਰਿੱਡ;
ਚੌੜਾਈ: 100%;
ਉਚਾਈ: 100%;
ਗਰਿੱਡ-ਟੈਂਪਲੇਟ-ਖੇਤਰ: “ਵੀਡੀਓ”
“ਕਾਰਵਾਈ”
“ਟੈਬਸ”;
grid-template-columns: 100%;
grid-template-rows: auto80px40%;
}
}
/* Panels/Components */
.layCamera {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਕੈਮਰਾ;
}
.layVideo {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਵੀਡੀਓ;
}
.layHistory {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: history;
}
.laySend {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਭੇਜਣ;
}
.layActions {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਕਾਰਵਾਈ;
}
.layTabs {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਟੈਬਸ;
}
.layMenu {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: ਮੇਨੂ;
}
.layPane {
ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ;
grid-area: pane;
}
.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: ਨਵੇਂ ਸੰਸਕਰਣ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਜਾਂ ਨਵੇਂ ਤੱਤ ਹੋ ਸਕਦੇ ਹਨ.