BareRTC/web/static/css/chat.css

315 lines
5.6 KiB
CSS
Raw Normal View History

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;
}
2023-08-05 19:15:16 +00:00
/* Truncate long text, e.g. usernames in the who list */
.truncate-text-line {
text-overflow: ellipsis;
}
/************************
* 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;
2023-04-20 05:00:31 +00:00
/* position: relative; */
2023-03-25 04:56:40 +00:00
}
/* Auto-scroll checkbox in the corner */
2023-04-20 05:00:31 +00:00
.autoscroll-field {
2023-03-25 04:56:40 +00:00
position: absolute;
z-index: 39; /* just below modal shadow */
right: 12px;
2023-03-25 04:56:40 +00:00
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;
2023-02-09 05:30:01 +00:00
/* 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;
}
2023-02-28 23:32:14 +00:00
/* 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: 150px;
}
2023-03-25 05:10:44 +00:00
/* User configurable font size increases */
2023-07-09 20:41:40 +00:00
#chatHistory .x-2 {
font-size: x-small;
}
#chatHistory .x-1 {
font-size: small;
}
#chatHistory .x1 {
2023-03-25 05:10:44 +00:00
font-size: large;
}
#chatHistory .x2 {
2023-03-25 05:10:44 +00:00
font-size: x-large;
}
#chatHistory .x3 {
2023-03-25 05:10:44 +00:00
font-size: xx-large;
}
#chatHistory .x4 {
2023-03-25 05:10:44 +00:00
font-size: 64pt;
}
/*******************
* Video Feeds CSS *
*******************/
.video-feeds {
background-color: #222;
width: 100%;
max-width: 100%;
2023-03-14 04:26:37 +00:00
/* display: flex;
2023-02-28 23:32:14 +00:00
flex-wrap: wrap;
2023-03-14 04:26:37 +00:00
align-items: left; */
}
2023-04-20 05:00:31 +00:00
.feed {
position: relative;
2023-03-14 04:26:37 +00:00
/* flex: 0 0 168px; */
float: left;
width: 168px;
height: 112px;
background-color: black;
2023-02-28 23:32:14 +00:00
margin: 3px;
2023-03-14 04:26:37 +00:00
overflow: hidden;
resize: both;
}
2023-04-20 05:00:31 +00:00
/* 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 {
2023-02-11 06:46:39 +00:00
flex: 0 0 252px;
width: 252px;
height: 168px;
}
.video-feeds.x2 > .feed {
2023-02-11 06:46:39 +00:00
flex: 0 0 336px;
width: 336px;
height: 224px;
}
.video-feeds.x3 > .feed {
2023-02-11 06:46:39 +00:00
flex: 0 0 504px;
width: 504px;
height: 336px;
}
.video-feeds.x4 > .feed {
2023-02-11 06:46:39 +00:00
flex: 0 0 672px;
width: 672px;
height: 448px;
}
2023-04-20 05:00:31 +00:00
.feed > video {
width: 100%;
height: 100%;
}
2023-04-20 05:00:31 +00:00
.feed > .controls {
position: absolute;
2023-03-14 04:26:37 +00:00
left: 4px;
bottom: 4px;
}
2023-04-20 05:00:31 +00:00
.feed > .close {
position: absolute;
right: 4px;
top: 0;
}
2023-04-20 05:00:31 +00:00
.feed > .caption {
position: absolute;
background: rgba(0, 0, 0, 0.75);
color: #fff;
top: 4px;
left: 4px;
font-size: small;
padding: 2px 4px;
2023-03-25 05:47:58 +00:00
}
/* YouTube embeds */
.youtube-embed {
max-width: 100%;
2023-03-28 04:13:04 +00:00
}
/* The Away icon that overlays profile pics */
.status-away-icon {
position: absolute;
top: 14px;
left: 16px;
}
/* Cursors */
2023-07-01 04:48:09 +00:00
.cursor-default {
cursor: default;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-notallowed {
cursor: not-allowed;
}
2023-07-01 03:00:21 +00:00
/* Emoji reaction button support */
.position-relative {
position: relative;
}
.emoji-button {
position: absolute;
right: 12px;
bottom: 12px;
}
.emoji-button button {
2023-07-01 03:04:28 +00:00
background-color: rgba(255, 255, 255, 0.5);
2023-07-01 04:48:09 +00:00
/* color: rgba(0, 0, 0, 0.5); */
2023-07-01 03:00:21 +00:00
}
2023-08-06 02:38:04 +00:00
/* 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;
}