mirror of
https://github.com/Nathanwoodburn/hnschat-web.git
synced 2025-01-19 04:08:12 +11:00
3036 lines
60 KiB
CSS
3036 lines
60 KiB
CSS
|
:root {
|
||
|
|
--themeColor: #409aed;
|
||
|
|
|
||
|
|
--positiveColor: #91b14f;
|
||
|
|
--negativeColor: #db4437;
|
||
|
|
--warningColor: #ffcf24;
|
||
|
|
|
||
|
|
--primaryBorderColor: #1c1c1c;
|
||
|
|
--secondaryBorderColor: #252525;
|
||
|
|
--tertiaryBorderColor: #3c3c3c;
|
||
|
|
|
||
|
|
--primaryForeground: #fff;
|
||
|
|
--secondaryForeground: #7a7a7a;
|
||
|
|
--tertiaryForeground: #a6a6a6;
|
||
|
|
|
||
|
|
--primaryBackground: #1e1e1e;
|
||
|
|
--secondaryBackground: #232323;
|
||
|
|
--tertiaryBackground: #282828;
|
||
|
|
--quaternaryBackground: #2f2f2f;
|
||
|
|
--quinaryBackground: #3c3c3c;
|
||
|
|
--senaryBackground: #262626;
|
||
|
|
--septenaryBackground: #555;
|
||
|
|
--octonaryBackground: #1a1a1a;
|
||
|
|
|
||
|
|
--bubbleBackground: #2d2d2d;
|
||
|
|
--bubbleSelfBackground: #409aed;
|
||
|
|
--bubbleMentionBackground: #91b14f;
|
||
|
|
|
||
|
|
--notificationColor: #db4437;
|
||
|
|
|
||
|
|
--scrollbarTrack: transparent;
|
||
|
|
--scrollbarThumb: #888888ee;
|
||
|
|
--scrollbarThumbHover: #555555;
|
||
|
|
|
||
|
|
--menuIcon: url(/assets/img/icons/menu);
|
||
|
|
--usersIcon: url(/assets/img/icons/users);
|
||
|
|
--composeIcon: url(/assets/img/icons/compose);
|
||
|
|
--lockIcon: url(/assets/img/icons/lock);
|
||
|
|
--closeIcon: url(/assets/img/icons/close);
|
||
|
|
--deleteIcon: url(/assets/img/icons/trash);
|
||
|
|
--messageIcon: url(/assets/img/icons/message);
|
||
|
|
--viewIcon: url(/assets/img/icons/view);
|
||
|
|
--plusIcon: url(/assets/img/icons/plus);
|
||
|
|
--payIcon: url(/assets/img/icons/pay);
|
||
|
|
--signatureIcon: url(/assets/img/icons/signature);
|
||
|
|
--checkIcon: url(/assets/img/icons/check);
|
||
|
|
--failIcon: url(/assets/img/icons/fail);
|
||
|
|
--warningIcon: url(/assets/img/icons/warning);
|
||
|
|
--replyIcon: url(/assets/img/icons/arrow);
|
||
|
|
--emojiIcon: url(/assets/img/icons/emoji);
|
||
|
|
--gifIcon: url(/assets/img/icons/gif);
|
||
|
|
--searchIcon: url(/assets/img/icons/search);
|
||
|
|
--clipboardIcon: url(/assets/img/icons/clipboard);
|
||
|
|
--editIcon: url(/assets/img/icons/edit);
|
||
|
|
--saveIcon: url(/assets/img/icons/save);
|
||
|
|
--mentionIcon: url(/assets/img/icons/mention);
|
||
|
|
--fishIcon: url(/assets/img/icons/fish);
|
||
|
|
--replayIcon: url(/assets/img/icons/replay);
|
||
|
|
--pinIcon: url(/assets/img/icons/pin);
|
||
|
|
--videoIcon: url(/assets/img/icons/video);
|
||
|
|
--voiceIcon: url(/assets/img/icons/voice);
|
||
|
|
--screenIcon: url(/assets/img/icons/screen);
|
||
|
|
--leaveIcon: url(/assets/img/icons/leave);
|
||
|
|
--audioIcon: url(/assets/img/icons/audio);
|
||
|
|
|
||
|
|
--handshakeIcon: url(/assets/img/handshake);
|
||
|
|
--unstoppableIcon: url(/assets/img/unstoppable);
|
||
|
|
--icannIcon: url(/assets/img/icann);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
height: 5px;
|
||
|
|
width: 5px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background-color: var(--scrollbarTrack);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--scrollbarThumb);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background-color: var(--scrollbarThumbHover);
|
||
|
|
}
|
||
|
|
.scroller {
|
||
|
|
scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack);
|
||
|
|
scrollbar-width: auto;
|
||
|
|
}
|
||
|
|
.scroller.f {
|
||
|
|
scrollbar-width: thin;
|
||
|
|
}
|
||
|
|
.scroller::-webkit-scrollbar-track {
|
||
|
|
margin-top: 0px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.positive {
|
||
|
|
color: var(--positiveColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
*,*:after,*:before {
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-size: contain;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
-webkit-mask-size: contain;
|
||
|
|
-webkit-mask-position: center;
|
||
|
|
-webkit-mask-repeat: no-repeat;
|
||
|
|
-moz-mask-size: contain;
|
||
|
|
-moz-mask-position: center;
|
||
|
|
-moz-mask-repeat: no-repeat;
|
||
|
|
mask-size: contain;
|
||
|
|
mask-position: center;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
font-family: "Arial";
|
||
|
|
font-size: 15px;
|
||
|
|
letter-spacing: 0.25px;
|
||
|
|
touch-action: pan-x pan-y;
|
||
|
|
}
|
||
|
|
|
||
|
|
body:not(.desktop) {
|
||
|
|
-webkit-touch-callout: none;
|
||
|
|
-webkit-user-callout: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-webkit-user-drag: none;
|
||
|
|
-webkit-user-modify: none;
|
||
|
|
-webkit-highlight: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo span {
|
||
|
|
font-family: "Rubik";
|
||
|
|
}
|
||
|
|
|
||
|
|
html,body {
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
min-width: 500px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
body[data-page=chat] {
|
||
|
|
overflow: hidden;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
div {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
iframe {
|
||
|
|
outline: none;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.hidden {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.shown:not(.flex) {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
.shown.flex {
|
||
|
|
display: flex !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.visible {
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.group {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.group:not(.searching) div:not(.clipboard) {
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#users .title .group.normal {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats .stat div:last-child {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats .stat .list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
a, .link {
|
||
|
|
color: var(--themeColor);
|
||
|
|
}
|
||
|
|
body.desktop a:not(.previewLink):hover, body.desktop .link:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address {
|
||
|
|
text-align: center;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageHeader .title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.messageHeader .title .decoded {
|
||
|
|
margin-left: 5px;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
tr,.title,.subtitle,.button,#qrcode,.header,.user,.time,.informational,.reply,.message.payment,.reactions .reaction,.fallback,.preview .media, .messageEffect, .messageEffect > *, .pinnedMessage > *, #videoInfo .actions > * {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error, .destructive {
|
||
|
|
color: var(--negativeColor) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.response {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.popover .response:not(:empty) {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.popover[data-name=pay] .response:empty {
|
||
|
|
margin-top: -10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.decrypt {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
.inline.nick, .inline.channel {
|
||
|
|
font-weight: bolder;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user {
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.desktop .inline:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
background-color: var(--primaryForeground);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
body.desktop .icon:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.icon.menu {
|
||
|
|
-webkit-mask-image: var(--menuIcon);
|
||
|
|
-moz-mask-image: var(--menuIcon);
|
||
|
|
mask-image: var(--menuIcon);
|
||
|
|
-webkit-mask-size: 20px;
|
||
|
|
-moz-mask-size: 20px;
|
||
|
|
mask-size: 20px;
|
||
|
|
}
|
||
|
|
.icon.users {
|
||
|
|
-webkit-mask-image: var(--usersIcon);
|
||
|
|
-moz-mask-image: var(--usersIcon);
|
||
|
|
mask-image: var(--usersIcon);
|
||
|
|
-webkit-mask-size: 20px;
|
||
|
|
-moz-mask-size: 20px;
|
||
|
|
mask-size: 20px;
|
||
|
|
}
|
||
|
|
.icon.compose {
|
||
|
|
-webkit-mask-image: var(--composeIcon);
|
||
|
|
-moz-mask-image: var(--composeIcon);
|
||
|
|
mask-image: var(--composeIcon);
|
||
|
|
}
|
||
|
|
.icon.search {
|
||
|
|
-webkit-mask-image: var(--searchIcon);
|
||
|
|
-moz-mask-image: var(--searchIcon);
|
||
|
|
mask-image: var(--searchIcon);
|
||
|
|
}
|
||
|
|
.icon.lock {
|
||
|
|
-webkit-mask-image: var(--lockIcon);
|
||
|
|
-moz-mask-image: var(--lockIcon);
|
||
|
|
mask-image: var(--lockIcon);
|
||
|
|
background-color: var(--negativeColor);
|
||
|
|
}
|
||
|
|
.icon.warning {
|
||
|
|
-webkit-mask-image: var(--warningIcon);
|
||
|
|
-moz-mask-image: var(--warningIcon);
|
||
|
|
mask-image: var(--warningIcon);
|
||
|
|
background-color: var(--warningColor);
|
||
|
|
}
|
||
|
|
.icon.close {
|
||
|
|
-webkit-mask-image: var(--closeIcon);
|
||
|
|
-moz-mask-image: var(--closeIcon);
|
||
|
|
mask-image: var(--closeIcon);
|
||
|
|
}
|
||
|
|
.icon.remove {
|
||
|
|
-webkit-mask-image: var(--plusIcon);
|
||
|
|
-moz-mask-image: var(--plusIcon);
|
||
|
|
mask-image: var(--plusIcon);
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
.icon.delete {
|
||
|
|
-webkit-mask-image: var(--deleteIcon);
|
||
|
|
-moz-mask-image: var(--deleteIcon);
|
||
|
|
mask-image: var(--deleteIcon);
|
||
|
|
background-color: var(--negativeColor);
|
||
|
|
}
|
||
|
|
.icon.message {
|
||
|
|
-webkit-mask-image: var(--messageIcon);
|
||
|
|
-moz-mask-image: var(--messageIcon);
|
||
|
|
mask-image: var(--messageIcon);
|
||
|
|
}
|
||
|
|
.icon.edit {
|
||
|
|
-webkit-mask-image: var(--editIcon);
|
||
|
|
-moz-mask-image: var(--editIcon);
|
||
|
|
mask-image: var(--editIcon);
|
||
|
|
}
|
||
|
|
.icon.save {
|
||
|
|
-webkit-mask-image: var(--saveIcon);
|
||
|
|
-moz-mask-image: var(--saveIcon);
|
||
|
|
mask-image: var(--saveIcon);
|
||
|
|
}
|
||
|
|
.icon.view {
|
||
|
|
-webkit-mask-image: var(--viewIcon);
|
||
|
|
-moz-mask-image: var(--viewIcon);
|
||
|
|
mask-image: var(--viewIcon);
|
||
|
|
}
|
||
|
|
.icon.plus {
|
||
|
|
-webkit-mask-image: var(--plusIcon);
|
||
|
|
-moz-mask-image: var(--plusIcon);
|
||
|
|
mask-image: var(--plusIcon);
|
||
|
|
-webkit-mask-size: 24px;
|
||
|
|
-moz-mask-size: 24px;
|
||
|
|
mask-size: 24px;
|
||
|
|
height: 24px;
|
||
|
|
width: 24px;
|
||
|
|
}
|
||
|
|
.icon.pay {
|
||
|
|
-webkit-mask-image: var(--payIcon);
|
||
|
|
-moz-mask-image: var(--payIcon);
|
||
|
|
mask-image: var(--payIcon);
|
||
|
|
-webkit-mask-size: 24px;
|
||
|
|
-moz-mask-size: 24px;
|
||
|
|
mask-size: 24px;
|
||
|
|
height: 24px;
|
||
|
|
width: 24px;
|
||
|
|
}
|
||
|
|
.icon.signature {
|
||
|
|
-webkit-mask-image: var(--signatureIcon);
|
||
|
|
-moz-mask-image: var(--signatureIcon);
|
||
|
|
mask-image: var(--signatureIcon);
|
||
|
|
width: 32px;
|
||
|
|
padding-left: 10px;
|
||
|
|
background-color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
.icon.signature.on {
|
||
|
|
background-color: var(--themeColor);
|
||
|
|
}
|
||
|
|
.icon.mention {
|
||
|
|
-webkit-mask-image: var(--mentionIcon);
|
||
|
|
-moz-mask-image: var(--mentionIcon);
|
||
|
|
mask-image: var(--mentionIcon);
|
||
|
|
}
|
||
|
|
.icon.fish {
|
||
|
|
-webkit-mask-image: var(--fishIcon);
|
||
|
|
-moz-mask-image: var(--fishIcon);
|
||
|
|
mask-image: var(--fishIcon);
|
||
|
|
}
|
||
|
|
.icon.pin {
|
||
|
|
-webkit-mask-image: var(--pinIcon);
|
||
|
|
-moz-mask-image: var(--pinIcon);
|
||
|
|
mask-image: var(--pinIcon);
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
.icon.video {
|
||
|
|
-webkit-mask-image: var(--videoIcon);
|
||
|
|
-moz-mask-image: var(--videoIcon);
|
||
|
|
mask-image: var(--videoIcon);
|
||
|
|
}
|
||
|
|
.icon.voice {
|
||
|
|
-webkit-mask-image: var(--voiceIcon);
|
||
|
|
-moz-mask-image: var(--voiceIcon);
|
||
|
|
mask-image: var(--voiceIcon);
|
||
|
|
}
|
||
|
|
.icon.screen {
|
||
|
|
-webkit-mask-image: var(--screenIcon);
|
||
|
|
-moz-mask-image: var(--screenIcon);
|
||
|
|
mask-image: var(--screenIcon);
|
||
|
|
}
|
||
|
|
.icon.leave {
|
||
|
|
-webkit-mask-image: var(--leaveIcon);
|
||
|
|
-moz-mask-image: var(--leaveIcon);
|
||
|
|
mask-image: var(--leaveIcon);
|
||
|
|
}
|
||
|
|
.icon.audio {
|
||
|
|
background-color: transparent;
|
||
|
|
background-image: var(--audioIcon);
|
||
|
|
}
|
||
|
|
.icon.replay {
|
||
|
|
-webkit-mask-image: var(--replayIcon);
|
||
|
|
-moz-mask-image: var(--replayIcon);
|
||
|
|
mask-image: var(--replayIcon);
|
||
|
|
}
|
||
|
|
.icon.reply {
|
||
|
|
-webkit-mask-image: var(--replyIcon);
|
||
|
|
-moz-mask-image: var(--replyIcon);
|
||
|
|
mask-image: var(--replyIcon);
|
||
|
|
}
|
||
|
|
.icon.emoji {
|
||
|
|
-webkit-mask-image: var(--emojiIcon);
|
||
|
|
-moz-mask-image: var(--emojiIcon);
|
||
|
|
mask-image: var(--emojiIcon);
|
||
|
|
}
|
||
|
|
.icon.emoji.big {
|
||
|
|
-webkit-mask-size: 24px;
|
||
|
|
-moz-mask-size: 24px;
|
||
|
|
mask-size: 24px;
|
||
|
|
height: 24px;
|
||
|
|
width: 32px;
|
||
|
|
}
|
||
|
|
.icon.gif {
|
||
|
|
-webkit-mask-image: var(--gifIcon);
|
||
|
|
-moz-mask-image: var(--gifIcon);
|
||
|
|
mask-image: var(--gifIcon);
|
||
|
|
}
|
||
|
|
.icon.gif.big {
|
||
|
|
-webkit-mask-size: 30px;
|
||
|
|
-moz-mask-size: 30px;
|
||
|
|
mask-size: 30px;
|
||
|
|
height: 24px;
|
||
|
|
width: 35px;
|
||
|
|
}
|
||
|
|
.icon.clipboard {
|
||
|
|
-webkit-mask-image: var(--clipboardIcon);
|
||
|
|
-moz-mask-image: var(--clipboardIcon);
|
||
|
|
mask-image: var(--clipboardIcon);
|
||
|
|
position: absolute;
|
||
|
|
right: 10px;
|
||
|
|
}
|
||
|
|
.icon.clipboard.copied {
|
||
|
|
background-color: var(--positiveColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext] .type {
|
||
|
|
margin: 5px auto 0 auto;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext][data-type=handshake] .type {
|
||
|
|
-webkit-mask-image: var(--handshakeIcon);
|
||
|
|
-moz-mask-image: var(--handshakeIcon);
|
||
|
|
mask-image: var(--handshakeIcon);
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext][data-type=unstoppable] .type {
|
||
|
|
background-image: var(--unstoppableIcon);
|
||
|
|
background-color: unset;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext][data-type=icann] .type {
|
||
|
|
-webkit-mask-image: var(--icannIcon);
|
||
|
|
-moz-mask-image: var(--icannIcon);
|
||
|
|
mask-image: var(--icannIcon);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.unverified #conversations .actionHolder .icon.compose {
|
||
|
|
background-color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.unverified #conversations .actionHolder:hover, body.unverified .messageRow .hover .actions:hover {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.unverified #conversations .actionHolder *, body.unverified .messageRow .hover .actions * {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#blackout {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
background-color: rgba(0,0,0,0.3);
|
||
|
|
z-index: 99999999;
|
||
|
|
display: none;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connecting {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
z-index: 999999999999;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover {
|
||
|
|
display: none;
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
max-width: 500px;
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
position: absolute;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 25px;
|
||
|
|
z-index: 99999999;
|
||
|
|
}
|
||
|
|
.popover .head {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
.popover .title {
|
||
|
|
width: 100%;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title.small {
|
||
|
|
font-size: inherit;
|
||
|
|
font-weight: inherit;
|
||
|
|
}
|
||
|
|
.subtitle {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu:not([data-name=userContext]) {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.contextMenu {
|
||
|
|
min-width: 250px;
|
||
|
|
max-width: 410px;
|
||
|
|
}
|
||
|
|
.contextMenu ul {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.contextMenu ul li {
|
||
|
|
text-align: center;
|
||
|
|
padding: 8px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] ul:not(:first-child) li, .contextMenu[data-name=channelContext] ul:not(:first-child) li {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=messageContext] ul li:hover, .contextMenu[data-name=userContext] ul:not(:first-child) li:hover, .contextMenu[data-name=channelContext] ul:not(:first-child) li:hover {
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu li.action {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu li.action * {
|
||
|
|
pointer-events: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu li.action .icon {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu textarea {
|
||
|
|
border-radius: 10px;
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext] .actions {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext].me .actions {
|
||
|
|
width: 100%;
|
||
|
|
height: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
padding: 0 20px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext] .actions .action {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext].me:not(.editing) .action.edit {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext].editing .action.save, .contextMenu[data-name=userContext].editing .action.close {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext] .pic {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 0 -10px 10px 0;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .pic .avatar {
|
||
|
|
height: 80px;
|
||
|
|
width: 80px;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .pic .fallback {
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] li.bio {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .bioHolder {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .bioHolder .limit {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext].editing .bioHolder {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
padding: 10px 10px 20px 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .bioHolder .bio {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
max-height: 110px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .bioHolder .bio *:not(.link) {
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext].editing .bioHolder .bio {
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext].editing .bioHolder .limit {
|
||
|
|
height: 20px;
|
||
|
|
padding: 5px;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] textarea[name=bio] {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext].me div.bio:empty:after {
|
||
|
|
content: "Tell everyone about yourself.";
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext].me ul:not(:first-child) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu .message {
|
||
|
|
word-break: break-word;
|
||
|
|
word-break: normal;
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextActions {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#qrcode {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
padding: 10px;
|
||
|
|
width: fit-content;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
border-radius: 10px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
#qrlogo {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
background: var(--tertiaryBackground);
|
||
|
|
height: 50px;
|
||
|
|
width: 50px;
|
||
|
|
margin-top: -25px;
|
||
|
|
margin-left: -25px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
#qrlogo img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(305deg) brightness(106%) contrast(101%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 400px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 10% 10px;
|
||
|
|
align-self: flex-start;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.form .logo {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.form .logo img {
|
||
|
|
height: 60px;
|
||
|
|
width: 60px;
|
||
|
|
}
|
||
|
|
.form .logo span {
|
||
|
|
font-size: 60px;
|
||
|
|
}
|
||
|
|
.form .section {
|
||
|
|
width: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form#id {
|
||
|
|
padding: 20px 10px;
|
||
|
|
align-self: initial;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
body[data-page=id] {
|
||
|
|
align-items: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section.loading {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
top: 20px;
|
||
|
|
}
|
||
|
|
.logo {
|
||
|
|
width: 105px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.logo img {
|
||
|
|
height: 30px;
|
||
|
|
width: 30px;
|
||
|
|
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(305deg) brightness(106%) contrast(101%);
|
||
|
|
}
|
||
|
|
.logo span {
|
||
|
|
font-size: 30px;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header .logo {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-right: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
body[data-page=id] .form .section {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form .section > *:not(:last-child), .popover .body > :not(:last-child), .popover .body .content > :not(:last-child), #manageDomains .domains > *:not(:last-child) {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#manageDomains .domains:empty {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#manageDomains .domains {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#manageDomains .domains .domain {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#manageDomains .domains .domain div {
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
max-width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.actions .action:not(:last-child) {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input .action {
|
||
|
|
margin-right: 8px;
|
||
|
|
background-color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input .action.gif {
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
select {
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
border-radius: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
font: inherit;
|
||
|
|
line-height: 1.5em;
|
||
|
|
padding: 0.5em 2.5em 0.5em 1em;
|
||
|
|
background-image: linear-gradient(45deg, transparent 50%, var(--secondaryForeground) 50%), linear-gradient(135deg, var(--secondaryForeground) 50%, transparent 50%);
|
||
|
|
background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
|
||
|
|
background-size: 5px 5px, 5px 5px, 1px 1.5em;
|
||
|
|
margin: 0;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
select:-moz-focusring {
|
||
|
|
color: transparent;
|
||
|
|
text-shadow: 0 0 0 #000;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
input[type=file] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
input[name=dot] {
|
||
|
|
background: transparent;
|
||
|
|
width: 25px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[readonly] {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
input.copyable {
|
||
|
|
padding-right: 35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input, textarea {
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
padding: 10px;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
[contenteditable=true] {
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form .input {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
background-color: var(--themeColor);
|
||
|
|
line-height: 40px;
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
border-radius: 10px;
|
||
|
|
text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.disabled:hover {
|
||
|
|
cursor: not-allowed !important;
|
||
|
|
}
|
||
|
|
body.desktop .button:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
#holder {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
#holder[data-type=channels] #users {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
#holder[data-type=channels] .header .icon.users {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#holder[data-type=pms] .header .icon.users {
|
||
|
|
background-color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
#holder[data-type=pms] .header .icon.users:hover {
|
||
|
|
cursor: not-allowed;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
#holder[data-type=pms] #users {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#holder .input .action[data-action=pay] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
body.bob #holder[data-type=pms] .input .action[data-action=pay] {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover[data-name=pay] .loading {
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.popover[data-name=pay] .content {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover[data-name=settings] .setting {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#react.react {
|
||
|
|
bottom: auto !important;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
#react, #completions {
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#completions {
|
||
|
|
left: 10px;
|
||
|
|
}
|
||
|
|
#react {
|
||
|
|
right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#react .grid {
|
||
|
|
display: none;
|
||
|
|
height: 300px;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
#react .grid[data-type=emojis] .subtitle {
|
||
|
|
padding-left: 5px;
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
#react .grid[data-type=emojis] .emojis {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
#react .grid[data-type=emojis] .emojis .emoji {
|
||
|
|
font-size: 27px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
height: 40px;
|
||
|
|
width: 40px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
#react .grid[data-type=emojis] .emojis .emoji:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--quinaryBackground);
|
||
|
|
}
|
||
|
|
|
||
|
|
#react .section[data-type=categories] {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: calc(50% - 5px) calc(50% - 5px);
|
||
|
|
padding: 5px;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories].shown {
|
||
|
|
display: grid !important;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories] .category {
|
||
|
|
height: 100px;
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 5px;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories] .category:hover {
|
||
|
|
opacity: 0.7;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories] .category > * {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories] .category .title {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 1px 1px #000;
|
||
|
|
}
|
||
|
|
#react .section[data-type=categories] .category .background {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-size: cover;
|
||
|
|
position: absolute;
|
||
|
|
filter: brightness(0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
#react .section[data-type=gifs] {
|
||
|
|
display: none;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#react .section[data-type=gifs] .column {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
width: 50%;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
#react .section[data-type=gifs] .gif {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
#react .section[data-type=gifs] .gif:hover {
|
||
|
|
opacity: 0.7;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting .subtitle {
|
||
|
|
width: 50%;
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
.setting input, .setting select {
|
||
|
|
width: 50%;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
width: 100%;
|
||
|
|
flex-shrink: 0;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
.header .left,.header .right {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: none;
|
||
|
|
flex-shrink: 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.header .left > *,.header .right > * {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.header .center {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
.header .end {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.header .avatar {
|
||
|
|
display: block;
|
||
|
|
margin: 0 5px 0 0;
|
||
|
|
}
|
||
|
|
.header #me .avatar {
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
.header .avatar:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.header .domain {
|
||
|
|
width: 100px;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.header .domains {
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.header .domains select:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#chats {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.sidebar {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
flex-shrink: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
#conversations {
|
||
|
|
width: 250px;
|
||
|
|
border-right: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
#conversations .tabs {
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
#conversations .tabs .tab {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
margin-right: 10px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
body.desktop #conversations .tabs .tab:not(.active):hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.header .left.notification:after, #conversations .tabs .tab.notification:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
background-color: var(--notificationColor);
|
||
|
|
height: 5px;
|
||
|
|
width: 5px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.header .left.notification:after {
|
||
|
|
top: 5px;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
#conversations .tabs .tab.notification:after {
|
||
|
|
top: 0;
|
||
|
|
right: -10px;
|
||
|
|
}
|
||
|
|
#conversations .tabs .tab.active {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
#conversations .title .actionHolder {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
#conversations .section {
|
||
|
|
max-height: 100%;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#users {
|
||
|
|
width: 200px;
|
||
|
|
border-left: 1px solid var(--primaryBorderColor);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#users.showing {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
#users #count {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
#users .user * {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#users .title .group {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#users .title .searching {
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#users .title .searching div {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputContainer {
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[name=search] {
|
||
|
|
margin: 0;
|
||
|
|
padding: 10px;
|
||
|
|
height: 25px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar > .title {
|
||
|
|
height: 40px;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 10px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
.sidebar .sections {
|
||
|
|
flex-grow: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.sidebar .sections .section:not(:first-of-type) > .title {
|
||
|
|
border-top: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
.sidebar .sections .section > .title {
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
.sidebar .section > .title {
|
||
|
|
height: 25px;
|
||
|
|
line-height: 25px;
|
||
|
|
padding-left: 10px;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
}
|
||
|
|
#users .users {
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.sidebar .section table {
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-y: overlay;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#conversations > .footer {
|
||
|
|
height: 40px;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
padding: 10px;
|
||
|
|
border-top: 1px solid var(--primaryBorderColor);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.footer .action {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
#conversations tr {
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
#users tr, #completions tr {
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
.sidebar tr, #completions tr {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.sidebar tr .title {
|
||
|
|
flex-grow: 1;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 88px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.sidebar tr .title .subtitle {
|
||
|
|
font-size: 12px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.sidebar tr .title .subtitle span {
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
#conversations tr.active, #completions tr.active {
|
||
|
|
background-color: var(--quinaryBackground);
|
||
|
|
}
|
||
|
|
.sidebar .section.channels tr.unread .avatar {
|
||
|
|
border: 2px solid var(--themeColor);
|
||
|
|
}
|
||
|
|
.sidebar .section.pms tr.unread .avatar .favicon {
|
||
|
|
border: 2px solid var(--notificationColor);
|
||
|
|
}
|
||
|
|
.sidebar tr.mentions .avatar {
|
||
|
|
border: 2px solid var(--notificationColor) !important;
|
||
|
|
}
|
||
|
|
body.desktop #conversations tr:not(.active):hover, body.desktop #users tr:hover, body.desktop .sidebar tr.selected {
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
}
|
||
|
|
body.desktop #users tr:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.sidebar tr:hover, #completions tr:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar .status.active {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: var(--positiveColor);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 3;
|
||
|
|
border: 2px solid var(--tertiaryBackground);
|
||
|
|
}
|
||
|
|
.contextMenu[data-name=userContext] .avatar .status.active {
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
border: 5px solid var(--quaternaryBackground);
|
||
|
|
}
|
||
|
|
|
||
|
|
.user:hover .avatar .status.active, .user.selected .avatar .status.active {
|
||
|
|
border: 2px solid var(--quaternaryBackground);
|
||
|
|
}
|
||
|
|
|
||
|
|
#users .user.inactive {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
margin-right: 10px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
#conversations .channels tr .avatar {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
tr.locked .avatar .locked, tr.locked .avatar .unclaimed {
|
||
|
|
z-index: 3;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.favicon {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 5px;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
.favicon[style*=background-image] + .fallback {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.fallback {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.messageRow .avatar .fallback {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 30px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-end;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputHolder {
|
||
|
|
min-height: 40px;
|
||
|
|
width: 100%;
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 8px;
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
border-top: 1px solid var(--primaryBorderColor);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.inputHolder.locked .input {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.inputHolder.locked .locked {
|
||
|
|
display: initial;
|
||
|
|
}
|
||
|
|
.input {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.input #signature {
|
||
|
|
padding: 0;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.input .inputs {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.inputs #message {
|
||
|
|
width: 100%;
|
||
|
|
line-height: 20px;
|
||
|
|
min-height: 20px;
|
||
|
|
height: 20px;
|
||
|
|
resize: none;
|
||
|
|
box-sizing: content-box;
|
||
|
|
padding: 0;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
.inputHolder .verify {
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.inputHolder .locked {
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.inputHolder .noConversations {
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#attachments {
|
||
|
|
height: 200px;
|
||
|
|
width: 100%;
|
||
|
|
background: var(--tertiaryBackground);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#attachments.shown {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
#attachments .attachment {
|
||
|
|
height: 100%;
|
||
|
|
width: 200px;
|
||
|
|
margin: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
#attachments .attachment .removeHolder {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
padding: 5px;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: -10px;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
#attachments .attachment .icon.remove {
|
||
|
|
background-color: var(--negativeColor);
|
||
|
|
}
|
||
|
|
.messageHeader {
|
||
|
|
height: 40px;
|
||
|
|
flex: 1;
|
||
|
|
flex-shrink: 0;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.messageHeader table {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.messageHeader tr .title .subtitle {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.messageHeader tr {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.messageHeader tr[data-type=channels] {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.content .pinnedMessage {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.pinnedMessage {
|
||
|
|
width: 100%;
|
||
|
|
flex: 1;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
display: none;
|
||
|
|
gap: 8px;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 10px;
|
||
|
|
border-left: 1px solid var(--tertiaryBorderColor);
|
||
|
|
}
|
||
|
|
.pinnedMessage:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.pinnedMessage .pin {
|
||
|
|
pointer-events: none;
|
||
|
|
height: 13px;
|
||
|
|
width: 13px;
|
||
|
|
}
|
||
|
|
.pinnedMessage .message {
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 18px;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
width: 0px;
|
||
|
|
white-space: nowrap;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
text-align: left;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
#videoInfo {
|
||
|
|
height: 40px;
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
overflow: hidden;
|
||
|
|
display: none;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
#videoInfo .title {
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
gap: 5px;
|
||
|
|
color: var(--negativeColor);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#videoInfo .info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
#videoInfo .users {
|
||
|
|
display: flex;
|
||
|
|
padding-right: -10px;
|
||
|
|
}
|
||
|
|
#videoInfo .watching {
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: -5px;
|
||
|
|
gap: 5px;
|
||
|
|
}
|
||
|
|
#videoInfo .watchers {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
#videoInfo .avatar {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
#videoInfo .avatar:hover {
|
||
|
|
z-index: 10;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#videoInfo .avatar:not(:first-child) {
|
||
|
|
margin-left: -15px;
|
||
|
|
}
|
||
|
|
#videoInfo .actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
#videoInfo .actions > * {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#videoContainer {
|
||
|
|
height: 40%;
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: var(--octonaryBackground);
|
||
|
|
overflow: hidden;
|
||
|
|
display: none;
|
||
|
|
padding: 15px;
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
}
|
||
|
|
#videoContainer.publishing {
|
||
|
|
padding-top: 55px !important;
|
||
|
|
}
|
||
|
|
.videoHolder {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.videoHolder .screen {
|
||
|
|
flex: 2;
|
||
|
|
background-color: var(--primaryBackground);
|
||
|
|
margin: 15px;
|
||
|
|
border-radius: 10px;
|
||
|
|
display: none;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.videoHolder .screen video {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.cams {
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
align-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
flex: 1;
|
||
|
|
border-radius: 10px;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.cam {
|
||
|
|
position: relative;
|
||
|
|
vertical-align: middle;
|
||
|
|
align-self: center;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: inline-block;
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
border: 2px solid var(--octonaryBackground);
|
||
|
|
}
|
||
|
|
.cam.talking {
|
||
|
|
box-shadow: 0 0 0 2px var(--positiveColor);
|
||
|
|
}
|
||
|
|
.cam .info, .screen .info {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: fit-content;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
.cam .info .icon.voice {
|
||
|
|
margin-left: 5px;
|
||
|
|
background-color: var(--negativeColor);
|
||
|
|
display: none;
|
||
|
|
height: 17px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.cam.audioMuted .info .icon.voice {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.cam .background {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.cam.videoMuted .background {
|
||
|
|
display: unset;
|
||
|
|
}
|
||
|
|
.cam .background .user {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.cam .background .user > .title, .cam .background .user:after, .cam .background .user .avatar .status {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.cam .background .user .avatar {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.cam .background .user .avatar .fallback {
|
||
|
|
font-size: 60px;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
.cam .background .user .avatar .favicon {
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
.cam video {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
object-fit: cover;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #000;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background-size: cover;
|
||
|
|
overflow: hidden;
|
||
|
|
-webkit-transition: margin-top 1s ease-in-out;
|
||
|
|
-moz-transition: margin-top 1s ease-in-out;
|
||
|
|
-o-transition: margin-top 1s ease-in-out;
|
||
|
|
transition: margin-top 1s ease-in-out;
|
||
|
|
}
|
||
|
|
.cam table, .screen table {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
padding: 5px 10px;
|
||
|
|
background-color: var(--senaryBackground);
|
||
|
|
width: fit-content;
|
||
|
|
border-radius: 10px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.cam tr, .screen tr {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.cam table .user .avatar, .screen table .user .avatar {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.cam table .user:hover, .screen table .user:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#videoContainer.publishing .controls {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.controls {
|
||
|
|
height: 40px;
|
||
|
|
width: 100%;
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.controls .button {
|
||
|
|
width: fit-content;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.controls .button > * {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.controls .button.muted {
|
||
|
|
border-color: var(--negativeColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.outline {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 2px solid var(--themeColor);
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
#messageHolder {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: scroll;
|
||
|
|
position: relative;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#messages.empty {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
#messages.empty:after {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
content: "There are no messages. You can be the first!";
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
#chats .content .needSLD {
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 20px;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
#chats .content .needSLD > * {
|
||
|
|
max-width: 350px;
|
||
|
|
}
|
||
|
|
#chats .content .needSLD > *:not(:last-child) {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
#messageHolder.noScroll {
|
||
|
|
position: static;
|
||
|
|
}
|
||
|
|
#messages {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 0px 5px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.messageRow {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
padding: 0px 5px;
|
||
|
|
transition: background-color 250ms;
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
.messageRow.highlighted {
|
||
|
|
background-color: var(--octonaryBackground);
|
||
|
|
}
|
||
|
|
.messageRow.notice {
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
}
|
||
|
|
.popover[data-name=messageContext].shown ~ #holder #messages .messageRow, #holder.replying .messageRow, #holder.reacting .messageRow {
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
.popover[data-name=messageContext].shown ~ #holder #messages .messageRow:is(.selecting,.selected), #holder.replying .messageRow.selected, #holder.reacting .messageRow.selected {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow:not(.first) > .contents .main .user, .messageRow:not(.first) > .contents .main .avatar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow.first {
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
.messageRow.last {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
.messageRow .holder {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#holder .messageRow:hover > .contents .hover > *, .messageRow:is(.selecting,.selected) > .contents .hover > * {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
}
|
||
|
|
body:not(.desktop) .messageRow:hover > .contents .hover .actions .action.delete {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.messageRow.self .holder {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) .holder {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.messageRow .actions {
|
||
|
|
width: 55px;
|
||
|
|
justify-content: space-evenly !important;
|
||
|
|
}
|
||
|
|
.messageRow .actions .action {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.messageRow .hover {
|
||
|
|
width: 32%;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
.messageRow .hover > * {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) .hover > div {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.messageRow.self .hover > div {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.messageRow .time {
|
||
|
|
line-height: 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
width: 55px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.messageRow.self .hover {
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
#messages .messageRow .message {
|
||
|
|
padding: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
max-width: 500px;
|
||
|
|
}
|
||
|
|
#messages .messageRow .preview {
|
||
|
|
background: var(--secondaryBackground);
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#messages .messageRow .preview > * {
|
||
|
|
line-height: 15px;
|
||
|
|
}
|
||
|
|
#messages .messageRow .preview .media {
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
#messages .messageRow .preview .media > * {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#messages .messageRow .previewImage .media {
|
||
|
|
margin-bottom: -12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messages .messageRow .preview .media img {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messages .messageRow .preview .media iframe, #messages .messageRow .preview .media video {
|
||
|
|
height: 280px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messages .messageRow:not(.first):not(.last), #messages .messageRow.first:not(.last) {
|
||
|
|
margin: 0 0 2px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messages > div, .messageFooter > div {
|
||
|
|
margin: 0 0 10px 0;
|
||
|
|
}
|
||
|
|
#messages > div:first-child {
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messages .informational {
|
||
|
|
text-align: center;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
.messageRow.informational .inline.nick, .messageRow.informational .inline.channel {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
.messageRow:not(.informational) {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.messageRow:not(.emojis):not(.action):not(.notice):not([data-style=fancy]):not(.mention) .message {
|
||
|
|
background-color: var(--bubbleBackground);
|
||
|
|
}
|
||
|
|
.messageRow.self:not(.emojis):not(.action):not(.notice):not([data-style=fancy]):not(.mention) .message {
|
||
|
|
background-color: var(--bubbleSelfBackground);
|
||
|
|
}
|
||
|
|
.messageRow.action .body, .messageRow.action .body *, .messageRow.replying .reply .body.action {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
.messageRow.action .body, .messageRow.action .body * {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
.messageRow.emojis .body, .messageRow[data-style=fancy] .body {
|
||
|
|
font-size: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
}
|
||
|
|
.messageRow.dice .body {
|
||
|
|
background: linear-gradient(7deg, grey 25%, lightgrey 50%, grey, lightgrey);
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
text-shadow: 0px 1px 1px rgb(0 0 0 / 13%), 1px 2px 2px rgb(0 0 0 / 13%), 2px 4px 4px rgb(0 0 0 / 13%), 4px 8px 8px rgb(0 0 0 / 13%), 8px 16px 16px rgb(0 0 0 / 13%);
|
||
|
|
}
|
||
|
|
.messageRow[data-style=fancy] .body {
|
||
|
|
background: linear-gradient(7deg, grey 25%, lightgrey 50%, grey, lightgrey);
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
text-shadow: 0px 1px 1px rgb(0 0 0 / 13%), 1px 2px 2px rgb(0 0 0 / 13%), 2px 4px 4px rgb(0 0 0 / 13%), 4px 8px 8px rgb(0 0 0 / 13%), 8px 16px 16px rgb(0 0 0 / 13%);
|
||
|
|
}
|
||
|
|
.messageRow.action:not(.self):not(.mention) .message {
|
||
|
|
padding-left: 0 !important;
|
||
|
|
padding-right: 0 !important;
|
||
|
|
}
|
||
|
|
.messageRow.action.self .message {
|
||
|
|
padding-left: 0 !important;
|
||
|
|
padding-right: 0 !important;
|
||
|
|
}
|
||
|
|
.messageRow.emojis.replying .reply .contents, .messageRow[data-style=fancy].replying .reply .contents {
|
||
|
|
top: -19px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.messageRow .message {
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
.messageRow.self {
|
||
|
|
align-self: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.messageRow.self .message {
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
border-bottom-left-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow.self .message .body a {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.messageRow.mention .message .body a {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.messageRow .message:not(.image) .body {
|
||
|
|
white-space: pre-line;
|
||
|
|
min-height: 17px;
|
||
|
|
min-width: 8px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) .message {
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
border-bottom-right-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow.self.first .message {
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self).first .message {
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow.self.last .message {
|
||
|
|
border-bottom-right-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self).last .message {
|
||
|
|
border-bottom-left-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow.mention:not(.self) .message {
|
||
|
|
background-color: var(--bubbleMentionBackground);
|
||
|
|
}
|
||
|
|
.messageRow.mention:not(.self) .message .body, .messageRow.mention:not(.self) .message .body * {
|
||
|
|
color: var(--primaryForeground) !important;
|
||
|
|
}
|
||
|
|
.message.signed:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.messageRow.first .contents {
|
||
|
|
padding-top: 15px;
|
||
|
|
}
|
||
|
|
.messageRow .user {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.messageRow:not(.informational) > .contents .user {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 12px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.informational):not(.self) > .contents .user {
|
||
|
|
margin-left: 50px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.informational).self > .contents .user {
|
||
|
|
margin-right: 50px;
|
||
|
|
}
|
||
|
|
.messageRow > .contents {
|
||
|
|
position: relative;
|
||
|
|
align-self: normal;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.messageRow.replying {
|
||
|
|
padding-top: 20px !important;
|
||
|
|
}
|
||
|
|
.messageRow.self.replying {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
.messageRow.self > .reply .contents {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .contents {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
align-items: center;
|
||
|
|
line-height: 1.2em;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .user {
|
||
|
|
padding-right: 5px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.messageRow > .reply {
|
||
|
|
display: flex;
|
||
|
|
width: 60%;
|
||
|
|
max-width: 550px;
|
||
|
|
position: absolute;
|
||
|
|
top: -12px;
|
||
|
|
}
|
||
|
|
.messageRow.self > .reply {
|
||
|
|
padding-right: 50px;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) > .reply {
|
||
|
|
padding-left: 50px;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .body {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .body > * {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .body:hover {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.messageRow.self > .reply {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.messageRow > .reply .line {
|
||
|
|
position: absolute;
|
||
|
|
width: 30px;
|
||
|
|
height: 20px;
|
||
|
|
top: 23px;
|
||
|
|
border: 3px solid var(--quinaryBackground);
|
||
|
|
border-bottom-style: none;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) > .reply .line {
|
||
|
|
left: 16px;
|
||
|
|
border-right-style: none;
|
||
|
|
border-top-left-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow.self > .reply .line {
|
||
|
|
right: 16px;
|
||
|
|
border-left-style: none;
|
||
|
|
border-top-right-radius: 10px;
|
||
|
|
}
|
||
|
|
.messageRow .reply .body .inline {
|
||
|
|
font-weight: inherit;
|
||
|
|
font-size: inherit;
|
||
|
|
color: inherit;
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
.messageRow.informational .user {
|
||
|
|
display: inline-block;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
.messageRow .linkHolder:not(:empty) {
|
||
|
|
max-width: 400px;
|
||
|
|
margin: 2px 0 0 50px;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: var(--bubbleBackground);
|
||
|
|
}
|
||
|
|
.messageRow.self .linkHolder:not(:empty) {
|
||
|
|
align-self: flex-end;
|
||
|
|
margin: 2px 50px 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .linkHolder .info {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .linkHolder .title, .messageRow .linkHolder .subtitle {
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
display: -webkit-box;
|
||
|
|
}
|
||
|
|
.messageRow .linkHolder .title {
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
max-height: 34px;
|
||
|
|
line-height: 17px;
|
||
|
|
}
|
||
|
|
.messageRow .linkHolder .subtitle {
|
||
|
|
-webkit-line-clamp: 3;
|
||
|
|
max-height: 60px;
|
||
|
|
}
|
||
|
|
body.desktop .messageRow .user:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.messageRow.self .user {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.messageRow .avatar {
|
||
|
|
position: absolute;
|
||
|
|
height: 38px;
|
||
|
|
width: 38px;
|
||
|
|
}
|
||
|
|
.messageRow.self .avatar {
|
||
|
|
right: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.messageRow:not(.self) .holder, .messageRow:not(.self) .messageEffect {
|
||
|
|
margin-left: 50px;
|
||
|
|
}
|
||
|
|
.messageRow.self .holder, .messageRow.self .messageEffect {
|
||
|
|
margin-right: 50px;
|
||
|
|
align-self: flex-end;
|
||
|
|
}
|
||
|
|
.messageEffect {
|
||
|
|
width: fit-content;
|
||
|
|
color: var(--themeColor);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 3px;
|
||
|
|
padding: 2px 0;
|
||
|
|
}
|
||
|
|
.messageEffect .icon {
|
||
|
|
background-color: var(--themeColor);
|
||
|
|
pointer-events: none;
|
||
|
|
height: 15px;
|
||
|
|
width: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .favicon:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.messageRow .reactions {
|
||
|
|
display: flex;
|
||
|
|
padding: 0px 0px 3px 0px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.messageRow .reactions:empty {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow.self .reactions {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .reactions .reaction {
|
||
|
|
margin-top: 5px;
|
||
|
|
padding: 5px;
|
||
|
|
width: 44px;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 20px;
|
||
|
|
background-color: var(--senaryBackground);
|
||
|
|
border-radius: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
box-sizing: border-box;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.messageRow .reactions .reaction:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--quinaryBackground) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow:not(.self) .reactions .reaction {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.messageRow.self .reactions .reaction {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow:not(.self) .reactions .reaction:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.messageRow.self .reactions .reaction:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.messageRow .reactions .reaction.self {
|
||
|
|
border: 1px solid var(--bubbleSelfBackground);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.message.self.signed:before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -10px;
|
||
|
|
left: -25px;
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
-webkit-mask-image: var(--checkIcon);
|
||
|
|
-moz-mask-image: var(--checkIcon);
|
||
|
|
mask-image: var(--checkIcon);
|
||
|
|
background-color: var(--positiveColor);
|
||
|
|
}
|
||
|
|
.message:not(.self).signed:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -10px;
|
||
|
|
right: -25px;
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
-webkit-mask-image: var(--checkIcon);
|
||
|
|
-moz-mask-image: var(--checkIcon);
|
||
|
|
mask-image: var(--checkIcon);
|
||
|
|
background-color: var(--positiveColor);
|
||
|
|
}
|
||
|
|
.message.self.signed.fail:before,.message:not(.self).signed.fail:after {
|
||
|
|
-webkit-mask-image: var(--failIcon);
|
||
|
|
-moz-mask-image: var(--failIcon);
|
||
|
|
mask-image: var(--failIcon);
|
||
|
|
background-color: var(--negativeColor);
|
||
|
|
}
|
||
|
|
.message .signature {
|
||
|
|
padding-top: 10px;
|
||
|
|
opacity: 0.7;
|
||
|
|
display: none;
|
||
|
|
cursor: text;
|
||
|
|
}
|
||
|
|
.message.typing {
|
||
|
|
width: 42px;
|
||
|
|
}
|
||
|
|
.message.image {
|
||
|
|
padding: 0 !important;
|
||
|
|
overflow: hidden;
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
.message.image:not(.payment) {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
.message.payment .body {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.message.payment .txMessage {
|
||
|
|
padding: 10px;
|
||
|
|
background-color: var(--bubbleBackground);
|
||
|
|
}
|
||
|
|
.messageRow.self .message.payment .txMessage {
|
||
|
|
background-color: var(--bubbleSelfBackground);
|
||
|
|
}
|
||
|
|
.message.payment .imageHolder {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
}
|
||
|
|
.message.payment .imageHolder img {
|
||
|
|
margin-bottom: -20px;
|
||
|
|
}
|
||
|
|
.message.payment {
|
||
|
|
padding-bottom: 50px;
|
||
|
|
background: var(--secondaryBackground);
|
||
|
|
}
|
||
|
|
.message.payment .amount {
|
||
|
|
font-size: 50px;
|
||
|
|
color: var(--positiveColor);
|
||
|
|
text-align: center;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
.message.payment a {
|
||
|
|
text-decoration: none !important;
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
.message.image img {
|
||
|
|
object-fit: contain;
|
||
|
|
display: block;
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 300px;
|
||
|
|
}
|
||
|
|
.typingCell {
|
||
|
|
height: 20px;
|
||
|
|
width: 50px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.messageFooter {
|
||
|
|
display: none;
|
||
|
|
padding: 0px 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#replying {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
}
|
||
|
|
#typing {
|
||
|
|
background-color: var(--secondaryBackground);
|
||
|
|
}
|
||
|
|
|
||
|
|
#replying, #typing {
|
||
|
|
border-top: 1px solid var(--primaryBorderColor);
|
||
|
|
padding: 5px;
|
||
|
|
display: none;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
#replying .message, #typing .message {
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
#replying .message span, #typing .message span {
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
#replying .action.remove {
|
||
|
|
background-color: var(--secondaryForeground);
|
||
|
|
}
|
||
|
|
|
||
|
|
#completions .body .list {
|
||
|
|
background-color: var(--tertiaryBackground);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#completions .body .list .title {
|
||
|
|
font-weight: initial;
|
||
|
|
font-size: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lds-ellipsis {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
transform: scale(0.3);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 18px;
|
||
|
|
left: -7px;
|
||
|
|
}
|
||
|
|
.lds-ellipsis div {
|
||
|
|
position: absolute;
|
||
|
|
width: 13px;
|
||
|
|
height: 13px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #fff;
|
||
|
|
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||
|
|
}
|
||
|
|
.lds-ellipsis div:nth-child(1) {
|
||
|
|
left: 8px;
|
||
|
|
animation: lds-ellipsis1 0.6s infinite;
|
||
|
|
}
|
||
|
|
.lds-ellipsis div:nth-child(2) {
|
||
|
|
left: 8px;
|
||
|
|
animation: lds-ellipsis2 0.6s infinite;
|
||
|
|
}
|
||
|
|
.lds-ellipsis div:nth-child(3) {
|
||
|
|
left: 32px;
|
||
|
|
animation: lds-ellipsis2 0.6s infinite;
|
||
|
|
}
|
||
|
|
.lds-ellipsis div:nth-child(4) {
|
||
|
|
left: 56px;
|
||
|
|
animation: lds-ellipsis3 0.6s infinite;
|
||
|
|
}
|
||
|
|
@keyframes lds-ellipsis1 {
|
||
|
|
0% {
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes lds-ellipsis3 {
|
||
|
|
0% {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes lds-ellipsis2 {
|
||
|
|
0% {
|
||
|
|
transform: translate(0, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translate(24px, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.lds-facebook {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
}
|
||
|
|
.lds-facebook div {
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
left: 8px;
|
||
|
|
width: 16px;
|
||
|
|
background: #fff;
|
||
|
|
animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
||
|
|
}
|
||
|
|
.lds-facebook div:nth-child(1) {
|
||
|
|
left: 8px;
|
||
|
|
animation-delay: -0.24s;
|
||
|
|
}
|
||
|
|
.lds-facebook div:nth-child(2) {
|
||
|
|
left: 32px;
|
||
|
|
animation-delay: -0.12s;
|
||
|
|
}
|
||
|
|
.lds-facebook div:nth-child(3) {
|
||
|
|
left: 56px;
|
||
|
|
animation-delay: 0;
|
||
|
|
}
|
||
|
|
@keyframes lds-facebook {
|
||
|
|
0% {
|
||
|
|
top: 8px;
|
||
|
|
height: 64px;
|
||
|
|
}
|
||
|
|
50%, 100% {
|
||
|
|
top: 24px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.lds-spinner {
|
||
|
|
color: official;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
}
|
||
|
|
.lds-spinner div {
|
||
|
|
transform-origin: 40px 40px;
|
||
|
|
animation: lds-spinner 1.2s linear infinite;
|
||
|
|
}
|
||
|
|
.lds-spinner div:after {
|
||
|
|
content: " ";
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 3px;
|
||
|
|
left: 37px;
|
||
|
|
width: 6px;
|
||
|
|
height: 18px;
|
||
|
|
border-radius: 20%;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(1) {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
animation-delay: -1.1s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(2) {
|
||
|
|
transform: rotate(30deg);
|
||
|
|
animation-delay: -1s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(3) {
|
||
|
|
transform: rotate(60deg);
|
||
|
|
animation-delay: -0.9s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(4) {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
animation-delay: -0.8s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(5) {
|
||
|
|
transform: rotate(120deg);
|
||
|
|
animation-delay: -0.7s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(6) {
|
||
|
|
transform: rotate(150deg);
|
||
|
|
animation-delay: -0.6s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(7) {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
animation-delay: -0.5s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(8) {
|
||
|
|
transform: rotate(210deg);
|
||
|
|
animation-delay: -0.4s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(9) {
|
||
|
|
transform: rotate(240deg);
|
||
|
|
animation-delay: -0.3s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(10) {
|
||
|
|
transform: rotate(270deg);
|
||
|
|
animation-delay: -0.2s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(11) {
|
||
|
|
transform: rotate(300deg);
|
||
|
|
animation-delay: -0.1s;
|
||
|
|
}
|
||
|
|
.lds-spinner div:nth-child(12) {
|
||
|
|
transform: rotate(330deg);
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
@keyframes lds-spinner {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#avatars {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: -1;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.compact .messageRow {
|
||
|
|
margin: 0 0 5px 0 !important;
|
||
|
|
margin-bottom: 5px !important;
|
||
|
|
padding: 2px !important;
|
||
|
|
display: inline-grid;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .holder {
|
||
|
|
margin: 0 !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .holder {
|
||
|
|
justify-content: flex-start !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .contents .user {
|
||
|
|
margin: 0 !important;
|
||
|
|
right: unset !important;
|
||
|
|
height: fit-content !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow.first .contents {
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .main {
|
||
|
|
line-height: 15px;
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .contents {
|
||
|
|
display: flex !important;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .message {
|
||
|
|
max-width: unset !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .hover {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .hover > .time {
|
||
|
|
display: block !important;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
width: 55px;
|
||
|
|
margin: 0;
|
||
|
|
top: 4px;
|
||
|
|
line-height: unset;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .hover > .actions {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .message {
|
||
|
|
border-radius: unset !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .user {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .contents .user {
|
||
|
|
position: relative;
|
||
|
|
font-size: inherit;
|
||
|
|
line-height: unset;
|
||
|
|
margin: 0 5px !important;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .avatar {
|
||
|
|
height: 17px;
|
||
|
|
width: 17px;
|
||
|
|
display: block !important;
|
||
|
|
right: unset;
|
||
|
|
margin: 0 0 0 65px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .avatar .fallback {
|
||
|
|
font-size: 10px;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .linkHolder {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .linkHolder:not(:empty) {
|
||
|
|
align-self: flex-start;
|
||
|
|
margin: 2px 0 0 75px;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .preview {
|
||
|
|
margin: 0 !important;
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .preview .media {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .message.image img {
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .contents .user {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
body.compact .messageRow .message .body {
|
||
|
|
color: var(--tertiaryForeground);
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
body.compact .messageRow.emojis .body, body.compact .messageRow[data-style=fancy] .body {
|
||
|
|
font-size: inherit;
|
||
|
|
line-height: inherit;
|
||
|
|
}
|
||
|
|
body.compact .messageRow.replying {
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .reply {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
padding: 0;
|
||
|
|
justify-content: flex-start !important;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
max-width: unset;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .reply .line {
|
||
|
|
height: 12px;
|
||
|
|
width: 40px;
|
||
|
|
margin: 5px 0 -3px 30px;
|
||
|
|
border-left-style: solid;
|
||
|
|
border-right-style: none;
|
||
|
|
border-top-left-radius: 5px;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
position: unset;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
body.compact .messageRow > .reply .contents {
|
||
|
|
justify-content: flex-start;
|
||
|
|
margin-left: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: grid;
|
||
|
|
grid-auto-flow: column;
|
||
|
|
line-height: 1.2em;
|
||
|
|
margin-top: -2px;
|
||
|
|
}
|
||
|
|
body.compact .messageRow.mention {
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
}
|
||
|
|
body.compact .messageRow .main {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .react {
|
||
|
|
margin-left: 75px !important;
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
body.compact .messageRow .reactions .reaction {
|
||
|
|
margin-left: 0 !important;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.compact .messageRow .messageEffect {
|
||
|
|
margin-left: 75px !important;
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#react .tabs {
|
||
|
|
display: flex;
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
#react .tabs .tab {
|
||
|
|
margin: 0 10px 0 0;
|
||
|
|
color: var(--secondaryForeground);
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
#react .tabs .tab:not(.active):hover {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
#react .tabs .tab.active {
|
||
|
|
color: var(--primaryForeground);
|
||
|
|
}
|
||
|
|
#react .search input {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .message.payment .txMessage:after {
|
||
|
|
content: "You received a payment. Click for transaction details.";
|
||
|
|
}
|
||
|
|
.messageRow.self .message.payment .txMessage:after {
|
||
|
|
content: "You sent a payment. Click for transaction details.";
|
||
|
|
}
|
||
|
|
|
||
|
|
#users .users .user .title:after,
|
||
|
|
#conversations .section.pms tr .title:after,
|
||
|
|
.messageRow .user:after,
|
||
|
|
#replying .name:after,
|
||
|
|
#chats .messageHeader tr[data-type=pms] .title:after,
|
||
|
|
#completions .list tr.user .title:after,
|
||
|
|
#typing .message span:after,
|
||
|
|
.popover[data-name=userContext] .user:after,
|
||
|
|
.cam .user .title:after {
|
||
|
|
content: "/";
|
||
|
|
font-size: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover[data-name=userContext] .user {
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messageContainer {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#jumpToPresent {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: flex-end;
|
||
|
|
z-index: 9999999;
|
||
|
|
}
|
||
|
|
#jumpToPresent > div {
|
||
|
|
padding: 5px;
|
||
|
|
background-color: var(--septenaryBackground);
|
||
|
|
opacity: 0.9;
|
||
|
|
position: fixed;
|
||
|
|
border-radius: 5px 5px 0 0;
|
||
|
|
z-index: 3;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
#jumpToPresent > div:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#confetti-canvas {
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover .body {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover[data-name=qr] .body {
|
||
|
|
min-height: 60px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#camera {
|
||
|
|
height: 350px;
|
||
|
|
width: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
#frame {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and (max-width: 1000px) {
|
||
|
|
html,body {
|
||
|
|
min-width: 320px;
|
||
|
|
}
|
||
|
|
#blackout {
|
||
|
|
z-index: 9999999999;
|
||
|
|
}
|
||
|
|
.popover {
|
||
|
|
min-width: 300px;
|
||
|
|
z-index: 99999999999;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.header .logo {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.header .center {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
.header .center .domains {
|
||
|
|
width: 17px;
|
||
|
|
}
|
||
|
|
.header .end {
|
||
|
|
padding: 0 2px;
|
||
|
|
}
|
||
|
|
.header .domains select {
|
||
|
|
background-color: var(--quaternaryBackground);
|
||
|
|
background-position: calc(100% - 10px) calc(1em + 2px), calc(100% - 5px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
|
||
|
|
width: 0px !important;
|
||
|
|
padding: 0px 7px 0 10px;
|
||
|
|
}
|
||
|
|
.header .left,.header .right {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.header .pinnedMessage {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.pinnedMessage {
|
||
|
|
height: 40px;
|
||
|
|
flex: unset;
|
||
|
|
flex-shrink: 0;
|
||
|
|
padding: 0 10px;
|
||
|
|
border-left: none;
|
||
|
|
border-bottom: 1px solid var(--primaryBorderColor);
|
||
|
|
}
|
||
|
|
.content .pinnedMessage.shown {
|
||
|
|
display: flex !important;
|
||
|
|
}
|
||
|
|
.messageHeader {
|
||
|
|
flex: unset;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
#conversations {
|
||
|
|
position: absolute;
|
||
|
|
width: 200px;
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
left: -200px;
|
||
|
|
transition: left .25s;
|
||
|
|
z-index: 999999999;
|
||
|
|
}
|
||
|
|
#conversations.showing {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
#users {
|
||
|
|
position: absolute;
|
||
|
|
width: 200px;
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
right: -200px;
|
||
|
|
transition: right .25s;
|
||
|
|
z-index: 999999999;
|
||
|
|
}
|
||
|
|
#users.showing {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.message.payment .amount {
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
#messages .messageRow .preview .media iframe {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messageRow .hover {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contextMenu[data-name=userContext], .contextMenu[data-name=messageContext] {
|
||
|
|
top: auto !important;
|
||
|
|
bottom: 50px;
|
||
|
|
left: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.menu .contextMenu[data-name=userContext], body.menu .contextMenu[data-name=messageContext] {
|
||
|
|
bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body #closeMenu {
|
||
|
|
position: absolute;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-color: rgba(0,0,0,0.3);
|
||
|
|
z-index: 99999999;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
body.menu #closeMenu {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
.cam .info {
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
.cam .info table {
|
||
|
|
transform: scale(0.75);
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
}
|