fbpx

CSS

The HTML5 Videochat app can be customizes as layout, aspect, interface with custom CSS. This involves more advanced designer skills.

ਇੰਟਰਫੇਸ ਐਲੀਮੈਂਟਸ

App uses elements from these interface frameworks:

Fomantic UI
Semantic UI React

If theme overwrites styling for some of the classes, ਤੁਹਾਡਾ ਡਿਜ਼ਾਇਨਰ ਠੀਕ ਕਰਨ ਲਈ ਵਾਧੂ CSS ਕੋਡ ਜੋੜ ਸਕਦਾ ਹੈ. ਜਾਂ ਸਾਈਟ ਥੀਮ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸਿਰਫ ਕਸਟਮ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ.
ਉਦਾਹਰਣ ਦੇ ਲਈ “.ਬਟਨ”, ਲਈ ਕੋਡ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ “.ui.button” ਨਾਲ ਕੁਝ ਖਾਸ ਸਟਾਈਲਿੰਗ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ “important!” .

ਕਸਟਮ ਐਪ CSS

ਇਹ ਕੋਡ ਹਾਲੀਆ ਸੰਸਕਰਣਾਂ ਦੁਆਰਾ ਪੁਰਾਣਾ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਇਹ ਮੁੱਖ ਤੱਤਾਂ ਦੀ ਸੂਚੀ ਬਣਾਉਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ:

ਖਾਕਾ

/* Panel Layouts */
.layoutChat {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 60px;
}
.ਲੇਆਉਟ ਟੈਬਸ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਮੀਨੂ”
“ਬਾਹੀ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 45pxauto;
}
.ਖਾਕਾ ਸੂਚੀ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ”
“ਮੀਨੂ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 45px;
}
.ਲੇਆਉਟ ਸਕਰੋਲੇਬਲ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 100%;
}
.ਪੈਨ ਐਕਟਿਵ
{
ਦਿੱਖ: ਦ੍ਰਿਸ਼ਮਾਨ;
}
.ਪੈਨ ਅਕਿਰਿਆਸ਼ੀਲ
{
ਦਿੱਖ: hidden;
}
/* ਐਪ ਲੇਆਉਟ */
.ਪ੍ਰਸਾਰਣ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਕੈਮਰਾ ਇਤਿਹਾਸ”
“ਕਾਰਵਾਈਆਂ ਭੇਜਦੀਆਂ ਹਨ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 45%55%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px;
}
.ਲੇਆਉਟਬ੍ਰੌਡਕਾਸਟ udਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਕੈਮਰਾ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px45px45px;
}
.ਲੇਆਉਟ ਪਲੇਬੈਕ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ ਇਤਿਹਾਸ”
“ਕਾਰਵਾਈਆਂ ਭੇਜਦੀਆਂ ਹਨ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 65%35%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px;
}
.ਲੇਆਉਟ ਪਲੇਬੈਕ ਆਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਵੀਡੀਓ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px45px45px;
}
.ਲੇਆਉਟ ਟੈਕਸਟ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px45px;
}
.ਲੇਆਉਟ ਸਹਿਯੋਗੀ ਪਾਠ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਟੈਬਸ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 45px;
}
.ਲੇਆਉਟਵੇਅ 2 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ ਕੈਮਰਾ”
“ਵੀਡੀਓ ਇਤਿਹਾਸ”
“ਕਾਰਵਾਈਆਂ ਭੇਜਦੀਆਂ ਹਨ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 65%35%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 40%ਆਟੋ 45px;
}
.ਲੇਆਉਟਵੇਅ 2 ਆਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਵੀਡੀਓ”
“ਕੈਮਰਾ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 45px45px45px45px;
}
.ਖਾਕਾ ਸਹਿਯੋਗ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ ਟੈਬਸ”
“ਕਾਰਵਾਈਆਂ ਟੈਬਸ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 65%35%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 45px;
}
/* ਮੋਬਾਈਲ ਲੇਆਉਟ */
/* ਹੇਠਲੇ ਰੈਜ਼ੋਲੂਸ਼ਨ ਲਈ ਵੀਡੀਓ ਪੂਰੀ ਚੌੜਾਈ ਲੈਂਦਾ ਹੈ ਅਤੇ ਹੇਠਾਂ ਚੈਟ ਸ਼ੋਅ ਕਰਦਾ ਹੈ */
@ਮੀਡੀਆ ਸਿਰਫ ਸਕ੍ਰੀਨ ਅਤੇ (max-width: 1150px)
{
.ਪ੍ਰਸਾਰਣ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਕੈਮਰਾ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto45%45px40px;
}
.ਲੇਆਉਟ ਪਲੇਬੈਕ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto30%45px40px;
}
.ਲੇਆਉਟਵੇਅ 2 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions
“ਕੈਮਰਾ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto25%45px40px25%;
}
.ਖਾਕਾ ਸਹਿਯੋਗ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
actions
“ਟੈਬਸ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 60px45%;
}
.ਲੇਆਉਟ ਸਹਿਯੋਗੀ ਪਾਠ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਟੈਬਸ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 60px;
}
}
/* ਬਹੁਤ ਘੱਟ ਰੈਜ਼ੋਲੂਸ਼ਨ ਲਈ 2 ਕਤਾਰਾਂ ਦੀ ਐਕਸ਼ਨ ਬਾਰ */
@ਮੀਡੀਆ ਸਿਰਫ ਸਕ੍ਰੀਨ ਅਤੇ (max-width: 800px)
{
.ਲੇਆਉਟ ਟੈਕਸਟ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px90px;
}
.ਲੇਆਉਟ ਸਹਿਯੋਗੀ ਪਾਠ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਟੈਬਸ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 90px;
}
.ਲੇਆਉਟਵੇਅ 2 ਆਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਵੀਡੀਓ”
“ਕੈਮਰਾ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px60px90px90px;
}
.ਲੇਆਉਟਬ੍ਰੌਡਕਾਸਟ udਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਕੈਮਰਾ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px90px65px;
}
.ਲੇਆਉਟ ਪਲੇਬੈਕ ਆਡੀਓ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਇਤਿਹਾਸ”
“ਭੇਜੋ”
“ਵੀਡੀਓ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 55px60px90px;
}
.ਪ੍ਰਸਾਰਣ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਕੈਮਰਾ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto35%45px65px;
}
.ਲੇਆਉਟ ਪਲੇਬੈਕ {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto30%55px90px;
}
.ਲੇਆਉਟਵੇਅ 2 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
“ਇਤਿਹਾਸ”
“ਭੇਜੋ”
actions
“ਕੈਮਰਾ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: auto20%55px90px30%;
}
.ਖਾਕਾ ਸਹਿਯੋਗ{
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਵੀਡੀਓ”
actions
“ਟੈਬਸ”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: ਆਟੋ 90px40%;
}
}
/* ਪੈਨਲ/ਕੰਪੋਨੈਂਟਸ */
.ਲੇ ਕੈਮਰਾ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਕੈਮਰਾ;
}
.layVideo {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਵੀਡੀਓ;
}
.ਲੇਅ ਇਤਿਹਾਸ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਇਤਿਹਾਸ;
}
.laySend {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਭੇਜੋ;
}
.ਲੇਅ ਐਕਸ਼ਨ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: actions;
}
.ਲੇਟੈਬਸ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਟੈਬਸ;
}
.layMenu {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਮੀਨੂ;
}
.ਲੇਪੈਨ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਬਾਹੀ;
}
.ਲੇਚੈਟ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਗੱਲਬਾਤ;
}
.ਲੇ ਸਕ੍ਰੋਲੇਬਲ {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ;
ਓਵਰਫਲੋ- y: ਸਕ੍ਰੌਲ;
}
/* ਮਲਟੀਮੀਡੀਆ ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਵੰਡੋ */
.ਸਪਲਿਟ 0 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਮੀਡੀਆ 0”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 100%;
}
.ਸਪਲਿਟ ਐਚ 2 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 50%50%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 100%;
}
.ਸਪਲਿਟ ਵੀ 2 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “ਮੀਡੀਆ 0”
“ਮੀਡੀਆ 1”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 100%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 50%50%;
}
.ਸਪਲਿਟ ਐਚ 4, .splitV4 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 50%50%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 50%50%;
}
.splitH6 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 34%33%33%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 50%50%;
}
.splitV6 {
position: absolute;
ਡਿਸਪਲੇ: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3
media4 media5”;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਾਲਮ: 50%50%;
ਗਰਿੱਡ-ਟੈਪਲੇਟ-ਕਤਾਰਾਂ: 34%33%33%;
}
/* Split Multimedia View Slots */
.slot0 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਮੀਡੀਆ 0;
}
.slot1 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: ਮੀਡੀਆ 1;
}
.slot2 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: media2;
}
.slot3 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: media3;
}
.slot4 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: media4;
}
.slot5 {
position: relative;
ਗਰਿੱਡ-ਖੇਤਰ: media5;
}
PS: Latest version may have changes or new elements.

ਇੰਟਰਫੇਸ CSS

/* ਇੰਟਰਫੇਸ ਐਲੀਮੈਂਟਸ, ਨਿਯੰਤਰਣਾਂ ਵਿੱਚ ਸ਼ਾਮਲ */
/* Videos */
.ਸਥਿਤੀ ਵੀਡੀਓ
{
}
.ਲੋਕਲ ਵਿਡੀਓ ਪਲੇ
{
}
/* ਇਤਿਹਾਸ */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
ਓਵਰਫਲੋ- y: ਸਕ੍ਰੌਲ;
/* background-color: ਆਰਜੀਬੀ(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
ਸੂਚੀ-ਸ਼ੈਲੀ-ਕਿਸਮ: none;
}
.ਗੱਲਬਾਤ ਦਾ ਸੁਨੇਹਾ {
ਸੂਚੀ-ਸ਼ੈਲੀ-ਕਿਸਮ: none;
padding-right: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7ਏ 7;
text-align: ਖੱਬੇ;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: ਇਟਾਲਿਕ;
color: #7ਏ.ਏ;
text-align: ਖੱਬੇ;
}
.chatMessage.user {
text-align: ਖੱਬੇ;
}
.chatMessageimg {
ਲੰਬਕਾਰੀ-ਇਕਸਾਰ: ਮੱਧ;
padding: 2px;
}
.chatMessagelabel {
ਡਿਸਪਲੇ: inline-block;
max-width: 85%;
background-color: white;
border-radius: 5px;
padding: 5px;
margin: 2px;
}
.chatMessage.darklabel{
background-color: #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;
}