fbpx

CSS

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

Interface Elements

App uses elements from these interface frameworks:

Fomantic UI
Semantic UI React

Layout

/* Panel Layouts */
.layoutChat {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “menu
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “scrollable
menu”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: গোপন;
}
/* App Layouts */
.layoutBroadcast {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ক্যামেরা”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ভিডিও”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ভিডিও”
“ক্যামেরা”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 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 (ম্যাক্স-প্রস্থ: 1150px এর)
{
.layoutBroadcast {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ক্যামেরা”
history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
history
“প্রেরণ করুন”
actions
“ক্যামেরা”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
actions
tabs”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (ম্যাক্স-প্রস্থ: 800px এর)
{
.layoutText {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “tabs
actions”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ভিডিও”
“ক্যামেরা”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ক্যামেরা”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “history
“প্রেরণ করুন”
“ভিডিও”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ক্যামেরা”
history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
history
“প্রেরণ করুন”
actions”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
history
“প্রেরণ করুন”
actions
“ক্যামেরা”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “ভিডিও”
actions
tabs”;
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: tabs;
}
.layMenu {
অবস্থান: আপেক্ষিক;
grid-area: menu;
}
.layPane {
অবস্থান: আপেক্ষিক;
grid-area: pane;
}
.layChat {
অবস্থান: আপেক্ষিক;
grid-area: আলাপ;
}
.layScrollable {
অবস্থান: আপেক্ষিক;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
অবস্থান: পরম;
প্রদর্শন: grid;
প্রস্থ: 100%;
উচ্চতা: 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 {
অবস্থান: আপেক্ষিক;
grid-area: media0;
}
.slot1 {
অবস্থান: আপেক্ষিক;
grid-area: media1;
}
.slot2 {
অবস্থান: আপেক্ষিক;
grid-area: media2;
}
.slot3 {
অবস্থান: আপেক্ষিক;
grid-area: media3;
}
.slot4 {
অবস্থান: আপেক্ষিক;
grid-area: media4;
}
.slot5 {
অবস্থান: আপেক্ষিক;
grid-area: media5;
}
জবুর শরীফ: Latest version may have changes or new elements.

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 {
টেক্সট প্রান্তিককরণ: ডান;
}