Noah Petherbridge
d8de60c990
* 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.
173 lines
3.0 KiB
CSS
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;
|
|
} |