Noah Petherbridge
e728644a77
This commit makes an initial port of the front-end over to a proper Vue
CLI application. It seems to work from surface level testing.
Changes made:
* Rename web/static to public/static to place it into the Vue build path
* Notes: web/static/js/BareRTC.js and web/templates/chat.html are now
deprecated
* Rename web/static/js/sounds.js into src/lib/sounds.js making it a
proper JavaScript module with exports.
* Fill out initial src/App.vue by copying and updating
web/templates/chat.html and web/static/js/BareRTC.js into this module.
344 lines
6.2 KiB
CSS
344 lines
6.2 KiB
CSS
html {
|
|
height: 100vh;
|
|
overscroll-behavior: contain;
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
/* Bulma override */
|
|
.media-content {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* DM title and bg color */
|
|
.has-background-private {
|
|
background-color: #b748c7;
|
|
}
|
|
.has-background-dm {
|
|
background-color: #ffefff;
|
|
}
|
|
|
|
/* Truncate long text, e.g. usernames in the who list */
|
|
.truncate-text-line {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Color coded webcam usernames per camera setting */
|
|
.has-text-camera-blue {
|
|
color: #00ccff !important;
|
|
}
|
|
.has-text-camera-red {
|
|
color: #ff9999 !important;
|
|
}
|
|
|
|
/* Max height for message in report modal */
|
|
.report-modal-message {
|
|
max-height: 150px;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Style fix to center wider icons on the Who's Online status icons */
|
|
.who-status-wide-icon-2 {
|
|
margin: -2px;
|
|
}
|
|
.who-status-wide-icon-1 {
|
|
margin: -1px;
|
|
}
|
|
|
|
/************************
|
|
* 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;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.chat-container {
|
|
background: rgb(39, 39, 39);
|
|
background: linear-gradient(0deg, rgb(39, 39, 39) 0%, rgb(66, 66, 66) 100%);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
overflow: hidden;
|
|
/* position: relative; */
|
|
}
|
|
|
|
/* Auto-scroll checkbox in the corner */
|
|
.autoscroll-field {
|
|
position: absolute;
|
|
z-index: 39; /* just below modal shadow */
|
|
right: 12px;
|
|
bottom: 4px;
|
|
}
|
|
|
|
/* 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;
|
|
|
|
/* Work around Safari bug: the chat history would just lengthen the full
|
|
web page every time cuz it doesn't do grids well, so add a max height
|
|
of 90% viewport height to mitigate it a bit. */
|
|
max-height: 90vh;
|
|
}
|
|
|
|
/* Ensure the chat history isn't squished too far by the Videos panel if
|
|
the user has a lot open/has made their size very big */
|
|
#chatHistory {
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* User configurable font size increases */
|
|
#chatHistory .x-2 {
|
|
font-size: x-small;
|
|
}
|
|
#chatHistory .x-1 {
|
|
font-size: small;
|
|
}
|
|
#chatHistory .x1 {
|
|
font-size: large;
|
|
}
|
|
#chatHistory .x2 {
|
|
font-size: x-large;
|
|
}
|
|
#chatHistory .x3 {
|
|
font-size: xx-large;
|
|
}
|
|
#chatHistory .x4 {
|
|
font-size: 64pt;
|
|
}
|
|
|
|
/*******************
|
|
* Video Feeds CSS *
|
|
*******************/
|
|
|
|
.video-feeds {
|
|
background-color: #222;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
/* display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start; */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.feed {
|
|
position: relative;
|
|
/* flex: 0 0 168px; */
|
|
float: left;
|
|
width: 168px;
|
|
height: 112px;
|
|
background-color: black;
|
|
margin: 3px;
|
|
overflow: hidden;
|
|
resize: both;
|
|
}
|
|
|
|
/* A popped-out video feed window */
|
|
div.feed.popped-out {
|
|
position: absolute;
|
|
border: 1px solid #FFF;
|
|
cursor: move;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
resize: none;
|
|
}
|
|
|
|
.video-feeds.x1 > .feed {
|
|
flex: 0 0 252px;
|
|
width: 252px;
|
|
height: 168px;
|
|
}
|
|
|
|
.video-feeds.x2 > .feed {
|
|
flex: 0 0 336px;
|
|
width: 336px;
|
|
height: 224px;
|
|
}
|
|
|
|
.video-feeds.x3 > .feed {
|
|
flex: 0 0 504px;
|
|
width: 504px;
|
|
height: 336px;
|
|
}
|
|
|
|
.video-feeds.x4 > .feed {
|
|
flex: 0 0 672px;
|
|
width: 672px;
|
|
height: 448px;
|
|
}
|
|
|
|
.feed > video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.feed > .controls {
|
|
position: absolute;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
}
|
|
|
|
.feed > .close {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 0;
|
|
}
|
|
|
|
.feed > .caption {
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: #fff;
|
|
top: 4px;
|
|
left: 4px;
|
|
font-size: small;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/* YouTube embeds */
|
|
.youtube-embed {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* The Away icon that overlays profile pics */
|
|
.status-away-icon {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 16px;
|
|
text-shadow: 0px 0px 4px #000;
|
|
}
|
|
|
|
/* Cursors */
|
|
.cursor-default {
|
|
cursor: default;
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.cursor-notallowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Emoji reaction button support */
|
|
.position-relative {
|
|
position: relative;
|
|
}
|
|
.emoji-button {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
}
|
|
.emoji-button button {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
/* color: rgba(0, 0, 0, 0.5); */
|
|
}
|
|
|
|
/* Gender colors for profile icon */
|
|
.has-text-gender-male {
|
|
color: #0099ff !important;
|
|
}
|
|
.has-text-gender-female {
|
|
color: #ff99ff !important;
|
|
}
|
|
.has-text-gender-other {
|
|
color: #cc00cc !important;
|
|
}
|
|
|
|
/* VIP colors for profile icon */
|
|
.has-background-vip {
|
|
background-image: linear-gradient(141deg, #d1e1ff 0, #ffddff 100%)
|
|
}
|