BareRTC/web/static/css/chat.css
Noah Petherbridge d8de60c990 Volume Controls, Mute/Unmute Video
* Added a top panel to put your video controls in.
* Broadcaster can mute or unmute their own audio input.
* When viewing others' cams, buttons appear to control their video:
  * Their username is displayed in the corner.
  * Mute/unmute button to silence their audio.
  * "X" button to close their camera.
* Button to show what viewers are currently watching your camera.
* Add an "About" page and config for app branding.
* Add dark theme CSS for prefers-dark browsers.
2023-02-05 20:26:00 -08:00

173 lines
3.0 KiB
CSS

html {
height: 100vh;
}
body {
min-height: 100vh;
}
.float-right {
float: right;
}
.cursor-default {
cursor: default;
}
/* Bulma override */
.media-content {
overflow: hidden !important;
}
/************************
* Main CSS Grid Layout *
************************/
.chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgb(190,190,190);
background: linear-gradient(0deg, rgb(172, 172, 172) 0%, rgb(214, 214, 214) 100%);
display: grid;
column-gap: 10px;
row-gap: 10px;
grid-template-columns: 260px 1fr 280px;
grid-template-rows: auto 1fr auto;
}
/* Header row */
.chat-container > .chat-header {
grid-column: 1 / 4;
grid-row: 1;
}
/* Left column: DMs and channels */
.chat-container > .left-column {
grid-column: 1;
overflow: hidden;
}
/* Main column: chat history */
.chat-container > .chat-column {
grid-column: 2;
grid-row: 2;
background-color: yellow;
overflow: hidden;
}
/* Footer row: message entry box */
.chat-container > .chat-footer {
grid-column: 1 / 4;
grid-row: 3;
}
/* Right column: Who List */
.chat-container > .right-column {
grid-column: 3;
overflow: hidden;
}
/* Responsive CSS styles */
@media screen and (min-width: 1024px) {
.mobile-only {
display: none;
}
}
@media screen and (max-width: 1024px) {
.chat-container {
grid-template-columns: 0px 1fr 0px;
column-gap: 0;
}
.left-column {
display: none;
}
.right-column {
display: none;
}
}
/***********************************************
* Reusable CSS Grid-based Bulma Card layouts *
* with a fixed header, full size scrollable *
* content, and (optionally) video-feeds under *
* the header (main chat card only) *
***********************************************/
.grid-card {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}
.grid-card > .card-header {
grid-row: 1;
}
.grid-card > .video-feeds {
grid-row: 2;
}
.grid-card > .card-content {
grid-row: 3;
/* background-color: magenta; */
overflow-y: scroll;
}
/*******************
* Video Feeds CSS *
*******************/
.video-feeds {
background-color: #222;
width: 100%;
max-width: 100%;
overflow-x: scroll;
display: flex;
align-items: left;
}
.video-feeds > .feed {
position: relative;
flex: 0 0 144px;
width: 168px;
height: 112px;
background-color: black;
margin: 5px;
}
.video-feeds > .feed > video {
width: 100%;
height: 100%;
}
.video-feeds > .feed > .controls {
position: absolute;
background: rgba(0, 0, 0, 0.75);
right: 4px;
bottom: 4px;
}
.video-feeds > .feed > .close {
position: absolute;
right: 4px;
top: 0;
}
.video-feeds > .feed > .caption {
position: absolute;
background: rgba(0, 0, 0, 0.75);
color: #fff;
top: 4px;
left: 4px;
font-size: small;
padding: 2px 4px;
}