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 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
.layoutTabs {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “メニュー”
pane”;
grid-template-columns: 100%;
grid-template-rows: 45pxauto;
}
.layoutList {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable
“メニュー”;
grid-template-columns: 100%;
grid-template-rows: auto 45px;
}
.layoutScrollable {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “scrollable”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.paneActive
{
visibility: visible;
}
.paneInactive
{
visibility: hidden;
}
/* App Layouts */
.layoutBroadcast {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “camera history
actions send”;
grid-template-columns: 45%55%;
grid-template-rows: auto55px;
}
.layoutBroadcastAudio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“カメラ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutPlayback {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: auto55px;
}
.layoutPlaybackAudio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“ビデオ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px45px;
}
.layoutText {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px45px;
}
.layoutCollaborationText {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “タブ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto45px;
}
.layoutWay2 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “video camera
video history
actions send”;
grid-template-columns: 65%35%;
grid-template-rows: 40%auto45px;
}
.layoutWay2Audio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“ビデオ”
“カメラ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto45px45px45px45px;
}
.layoutCollaboration {
position: absolute;
表示: grid;
width: 100%;
height: 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 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “カメラ”
history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto45%45px40px;
}
.layoutPlayback {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto30%45px40px;
}
.layoutWay2 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
history
“送信”
“アクション”
“カメラ”;
grid-template-columns: 100%;
grid-template-rows: auto25%45px40px25%;
}
.layoutCollaboration {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
“アクション”
“タブ”;
grid-template-columns: 100%;
grid-template-rows: auto60px45%;
}
.layoutCollaborationText {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “タブ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto60px;
}
}
/* For very low resolutions 2 rows action bar */
@media only screen and (最大幅: 800px)
{
.layoutText {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px;
}
.layoutCollaborationText {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “タブ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto90px;
}
.layoutWay2Audio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“ビデオ”
“カメラ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px90px;
}
.layoutBroadcastAudio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“カメラ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px90px65px;
}
.layoutPlaybackAudio {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “history
“送信”
“ビデオ”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto55px60px90px;
}
.layoutBroadcast {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “カメラ”
history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto35%45px65px;
}
.layoutPlayback {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
history
“送信”
“アクション”;
grid-template-columns: 100%;
grid-template-rows: auto30%55px90px;
}
.layoutWay2 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
history
“送信”
“アクション”
“カメラ”;
grid-template-columns: 100%;
grid-template-rows: auto20%55px90px30%;
}
.layoutCollaboration{
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “ビデオ”
“アクション”
“タブ”;
grid-template-columns: 100%;
grid-template-rows: auto90px40%;
}
}
/* Panels/Components */
.layCamera {
position: relative;
grid-area: カメラ;
}
.layVideo {
position: relative;
grid-area: ビデオ;
}
.layHistory {
position: relative;
grid-area: history;
}
.laySend {
position: relative;
grid-area: 送信;
}
.layActions {
position: relative;
grid-area: アクション;
}
.layTabs {
position: relative;
grid-area: タブ;
}
.layMenu {
position: relative;
grid-area: メニュー;
}
.layPane {
position: relative;
grid-area: pane;
}
.layChat {
position: relative;
grid-area: チャット;
}
.layScrollable {
position: relative;
grid-area: scrollable;
overflow-y: scroll;
}
/* Split Multimedia Views */
.split0 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0”;
grid-template-columns: 100%;
grid-template-rows: 100%;
}
.splitH2 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1”;
grid-template-columns: 50%50%;
grid-template-rows: 100%;
}
.splitV2 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0
media1”;
grid-template-columns: 100%;
grid-template-rows: 50%50%;
}
.splitH4, .splitV4 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1
media2 media3”;
grid-template-columns: 50%50%;
grid-template-rows: 50%50%;
}
.splitH6 {
position: absolute;
表示: grid;
width: 100%;
height: 100%;
grid-template-areas: “media0 media1 media2
media3 media4 media5”;
grid-template-columns: 34%33%33%;
grid-template-rows: 50%50%;
}
.splitV6 {
position: absolute;
表示: grid;
width: 100%;
height: 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 {
position: relative;
grid-area: media0;
}
.slot1 {
position: relative;
grid-area: media1;
}
.slot2 {
position: relative;
grid-area: media2;
}
.slot3 {
position: relative;
grid-area: media3;
}
.slot4 {
position: relative;
grid-area: media4;
}
.slot5 {
position: relative;
grid-area: media5;
}
PS: Latest version may have changes or new elements.

Interface CSS

/* Interface Elements, contained in Controls */
/* ビデオ */
.localVideo
{
}
.localVideoPlay
{
}
/* History */
.chatMessageList {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
/* 背景色: rgb(225, 233, 225); */
padding: 0;
margin: 0;
}
.chatMessageListul {
list-style-type: なし;
}
.chatMessage {
list-style-type: なし;
右パディング: 10px;
font-size: 12px;
color: #777;
font-weight: normal;
}
.chatMessage.dark
{
color: #FFF;
}
.chatMessage.notification {
color: #7A7;
text-align: left;
}
.chatMessage.dark.notification
{
color: #EFE;
}
.chatMessage.automated {
font-style: italic;
color: #7AA;
text-align: left;
}
.chatMessage.user {
text-align: left;
}
.chatMessageimg {
vertical-align: middle;
padding: 2px;
}
.chatMessagelabel {
表示: inline-block;
最大幅: 85%;
背景色: white;
境界線の半径: 5px;
padding: 5px;
margin: 2px;
}
.chatMessage.darklabel{
背景色: #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;
}