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