1108 lines
24 KiB
CSS
1108 lines
24 KiB
CSS
#chat_widget {
|
|
background-color: rgb(var(--movim-background-main));
|
|
overflow: hidden;
|
|
}
|
|
|
|
#chat_widget:has(header) {
|
|
display: grid;
|
|
flex-direction: column;
|
|
grid-template-columns: [start] calc(100% - 25rem) [nav] 25rem [end];
|
|
grid-template-rows: [start] 7rem [header] 0 [visio] auto [box] 1fr [end];
|
|
}
|
|
|
|
#chat_widget:has(header):has(#visio[data-jid]) {
|
|
grid-template-rows: [start] 7rem [header] 2fr [visio] 2fr [box] 0fr [end];
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
#chat_widget:has(header) {
|
|
grid-template-columns: [start] 100% [nav] 0 [end];
|
|
}
|
|
}
|
|
|
|
/** nav **/
|
|
|
|
#chat_widget nav {
|
|
box-shadow: var(--elevation-2) inset;
|
|
border-left: 1px solid rgba(var(--movim-font), 0.05);
|
|
grid-column: nav / end;
|
|
grid-row: visio / end;
|
|
width: 100%;
|
|
overflow: hidden scroll;
|
|
}
|
|
|
|
#chat_widget nav>ul>li {
|
|
padding: 0 0.5rem;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
#chat_widget nav>ul>li span.icon.small {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
main:not(.enabled) #chat_widget {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#chat_frequent,
|
|
#chat_explore {
|
|
width: 100%;
|
|
}
|
|
|
|
#chat_widget>div:not(#chat_explore):not(#chat_frequent),
|
|
#chat_widget>header {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#chat_widget>header {
|
|
box-shadow: var(--elevation-flat);
|
|
z-index: 1;
|
|
grid-column: start / end;
|
|
grid-row: start / header;
|
|
background-color: rgb(var(--movim-background));
|
|
}
|
|
|
|
#chat_widget nav ul#room_nav_members:has(li.found) li:not(.found) {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget nav li.search form div:after {
|
|
background-color: rgb(var(--movim-background));
|
|
}
|
|
|
|
#chat_widget nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#chat_widget nav ul#room_nav_members_search {
|
|
order: 0;
|
|
}
|
|
|
|
#chat_widget nav ul#room_nav_members {
|
|
order: 1;
|
|
}
|
|
|
|
#chat_widget nav ul#room_nav_members:not(:has(> li:nth-child(10)))+ul#room_nav_members_search {
|
|
display: none;
|
|
}
|
|
|
|
/** contained **/
|
|
|
|
#chat_widget .contained {
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
grid-column: start / end;
|
|
grid-row: visio / box;
|
|
}
|
|
|
|
#chat_widget nav~.contained {
|
|
grid-column: start / nav;
|
|
}
|
|
|
|
#chat_widget .contained.history {
|
|
mask-image: linear-gradient(to bottom, transparent, black 25% 75%, transparent);
|
|
}
|
|
|
|
#chat_widget ul.list.flex:not(:has(.story)) {
|
|
width: 100%;
|
|
}
|
|
|
|
#chat_widget .contained:before {
|
|
position: absolute;
|
|
display: block;
|
|
background-color: var(--movim-accent);
|
|
width: 100%;
|
|
height: 0.25rem;
|
|
content: '';
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: 0% 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
#chat_widget .contained.loading:before {
|
|
animation: loadingBar 3s infinite linear;
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes loadingBar {
|
|
0% {
|
|
transform: translateX(0) scaleX(0);
|
|
}
|
|
|
|
33% {
|
|
transform: translateX(0) scaleX(0.33);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%) scaleX(0.33);
|
|
}
|
|
}
|
|
|
|
#chat_widget .contained section {
|
|
max-width: 100rem;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/** call **/
|
|
|
|
#chat_widget.call #chat_conference_call {
|
|
grid-column: start / end;
|
|
grid-row: header / end;
|
|
background-color: rgb(var(--movim-background-main));
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#chat_widget.call nav,
|
|
#chat_widget.call .contained,
|
|
#chat_widget.call .chat_box {
|
|
display: none;
|
|
}
|
|
|
|
/* Chat attach list */
|
|
|
|
#chat_widget ul.list.actions {
|
|
position: absolute;
|
|
bottom: 7rem;
|
|
right: 0;
|
|
opacity: 0;
|
|
transform: translateY(5%);
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
pointer-events: none;
|
|
width: 20rem;
|
|
background-color: rgb(var(--movim-background-main));
|
|
box-shadow: var(--elevation-2);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
#chat_widget span.control.enabled+ul.list.actions {
|
|
opacity: 1;
|
|
z-index: 2;
|
|
transform: translateY(0);
|
|
pointer-events: initial;
|
|
}
|
|
|
|
/* Scroll button */
|
|
|
|
#chat_widget #scroll_down.button.action,
|
|
#chat_widget #scroll_now.button.action {
|
|
animation: none;
|
|
opacity: 0;
|
|
transform: scale(90%);
|
|
position: absolute;
|
|
top: -6.25rem;
|
|
right: 0.75rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#chat_widget .contained.history~.chat_box #scroll_now.button.action {
|
|
width: 7rem;
|
|
right: 1.5rem;
|
|
}
|
|
|
|
#chat_widget .contained.history~.chat_box #scroll_now.button.action,
|
|
#chat_widget .contained:not(.history)~.chat_box #scroll_now.button.action+#scroll_down.button.action.show {
|
|
transition: transform 0.2s ease-in-out, opacity 0.2s;
|
|
transform: scale(100%);
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* Chat box */
|
|
|
|
#chat_widget .chat_box {
|
|
position: relative;
|
|
grid-column: start / end;
|
|
grid-row: box / end;
|
|
align-self: end;
|
|
}
|
|
|
|
#chat_widget nav~.chat_box {
|
|
grid-column: start / nav;
|
|
}
|
|
|
|
#chat_widget .chat_box ul {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#chat_widget .chat_box form>div {
|
|
min-height: 0;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
#chat_widget .chat_box form textarea {
|
|
padding: 0;
|
|
margin: 0 2rem;
|
|
max-height: 50vh;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
width: calc(100% - 4rem);
|
|
transition: margin-left 0.1s ease-in-out;
|
|
}
|
|
|
|
#chat_widget .chat_box ul.list>li.main.edit form div:before {
|
|
content: "\e3c9";
|
|
top: 0;
|
|
line-height: 6rem;
|
|
}
|
|
|
|
#chat_widget .chat_box ul.list>li.main.edit form textarea {
|
|
margin-left: 5.5rem;
|
|
width: calc(100% - 7.5rem);
|
|
}
|
|
|
|
#chat_widget .chat_box form textarea~span.encrypted,
|
|
#chat_widget .chat_box form textarea~span.encrypted_disabled,
|
|
#chat_widget .chat_box form textarea~span.encrypted_loading {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget .chat_box form textarea~span.encrypted_loading {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#chat_widget .chat_box form textarea[data-encryptedstate] {
|
|
width: calc(100% - 6.5rem);
|
|
}
|
|
|
|
#chat_widget .chat_box ul.list>li.main.edit form textarea[data-encryptedstate] {
|
|
width: calc(100% - 9.5rem);
|
|
}
|
|
|
|
#chat_widget .chat_box form textarea[data-encryptedstate="yes"]~span.control.icon.encrypted,
|
|
#chat_widget .chat_box form textarea[data-encryptedstate="disabled"]~span.control.icon.encrypted_disabled,
|
|
#chat_widget .chat_box form textarea[data-encryptedstate="build"]~span.control.icon.encrypted_loading {
|
|
display: inline-block;
|
|
font-size: 2.75rem;
|
|
line-height: 6rem;
|
|
height: 6rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 0 1.5rem;
|
|
z-index: 1;
|
|
color: rgba(var(--movim-font), 0.68);
|
|
}
|
|
|
|
#chat_widget .chat_box li.main>span.primary,
|
|
#chat_widget .chat_box li.main>span.control:not(.button):not(.color) {
|
|
font-size: 3.5rem;
|
|
animation: fadeIn 0.3s;
|
|
flex: 0 0 5rem;
|
|
margin-right: 0;
|
|
}
|
|
|
|
#chat_widget .chat_box span.primary:active,
|
|
#chat_widget .chat_box span.control:not(.button):not(.color):active {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
|
|
#chat_widget .chat_box.compose span.control[title="dictaphone"] {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget #dictaphone:has(#dictaphone_widget.show)~.main #dictaphone_toggle {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
|
|
#chat_widget .chat_box span.primary#record {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
#chat_widget .chat_box span.control:not(.button) i {
|
|
font-size: inherit;
|
|
}
|
|
|
|
#chat_widget .chat_box span.control:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#chat_widget .chat_box:after {
|
|
position: absolute;
|
|
display: block;
|
|
background-color: var(--movim-accent);
|
|
width: 0;
|
|
height: 0.25rem;
|
|
content: '';
|
|
top: -0.25rem;
|
|
transition: width 5s ease-in-out, opacity 0.2s ease-in-out;
|
|
opacity: 0;
|
|
}
|
|
|
|
#chat_widget .chat_box.sending:after {
|
|
width: 100%;
|
|
opacity: 1;
|
|
}
|
|
|
|
#chat_widget .chat_box.finished:after {
|
|
transition: width 1s cubic-bezier(.68, 0, 0, 1), opacity 1s ease-in-out;
|
|
width: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
#chat_widget .chat_box.sending li.main>span.control.send {
|
|
animation: loadingOpacity 0.7s infinite alternate;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#chat_widget .chat_box>ul.list>li:not(:empty) {
|
|
min-height: 0;
|
|
padding-left: 2rem;
|
|
padding-top: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
padding-bottom: 0.75rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#chat_widget .chat_box>ul.list>li form {
|
|
position: relative;
|
|
margin: 0 0.5rem;
|
|
padding: 0;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
#chat_widget .chat_box>ul.list>li>.control {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
#chat_widget .chat_box>ul.list>li>.control.attach.enabled {
|
|
transform: rotate(45deg);
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
|
|
#chat_widget .chat_box.compose>ul.list>li>ul.list.actions,
|
|
#chat_widget .chat_box.compose>ul.list>li #dictaphone_toggle,
|
|
#chat_widget .chat_box:not(.compose)>ul.list>li>.control.attach~.control.send:not(.emojis),
|
|
#chat_widget .chat_box.compose>ul.list>li>.control.attach~.control:not(.send):not(.emojis),
|
|
#chat_widget .chat_box.compose>ul.list>li>.control:not(.send):not(.emojis) {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget section>ul.list>li.oppose {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
#chat_widget .chat_box {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#chat_widget section>ul.list>li.oppose>span.primary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#chat_widget .contained ul {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Emojis */
|
|
|
|
#chat_widget .chat_box li.emojis:not(:empty) {
|
|
text-align: center;
|
|
margin-top: 0.25rem;
|
|
max-height: 10.5rem;
|
|
overflow: hidden;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
border-top: 1px solid rgba(var(--movim-font), 0.12);
|
|
}
|
|
|
|
#chat_widget .chat_box .emojis img {
|
|
display: inline-block;
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
margin: 0;
|
|
flex: 0 0 5rem;
|
|
height: 5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chat_widget .chat_box .emojis img:hover,
|
|
#chat_widget .chat_box .emojis img.selected {
|
|
cursor: pointer;
|
|
background-color: rgba(var(--movim-font), 0.05);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Chatroom */
|
|
|
|
#chat_widget ul.simple {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
#chat_widget div:not(.chat_box):not(#chat_explore) ul.conversation>li>span.icon,
|
|
#chat_widget div:not(.chat_box):not(#chat_explore) ul.state>li>span.icon {
|
|
align-self: flex-start;
|
|
margin: 0;
|
|
}
|
|
|
|
#chat_widget li img:not(.emoji):not(.main):not(.inline) {
|
|
max-width: 100%;
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
#chat_widget li img.active {
|
|
transition: filter 0.3s ease-in-out, box-shadow 0.3s ease;
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
#chat_widget li img.active:hover {
|
|
cursor: pointer;
|
|
box-shadow: var(--elevation-2);
|
|
filter: grayscale(.7);
|
|
}
|
|
|
|
#chat_widget li img.active:active {
|
|
box-shadow: var(--elevation-1);
|
|
filter: grayscale(.9);
|
|
}
|
|
|
|
#chat_widget li img.sticker {
|
|
max-height: 150px;
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
#chat_widget ul.list:after {
|
|
content: " ";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
#chat_widget .contained.muc ul li span.primary:not(:empty):hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#chat_widget .contained ul li.sequel>span.icon,
|
|
#chat_widget .contained ul li.sequel .bubble::before,
|
|
#chat_widget .contained ul li.oppose+li.oppose>span.icon,
|
|
#chat_widget .contained ul li.oppose+li.oppose .bubble::before,
|
|
#chat_widget .contained:not(.muc) ul li:not(.oppose):not(.separator):not(.date)+li:not(.oppose)>span.icon,
|
|
#chat_widget .contained:not(.muc) ul li:not(.oppose):not(.separator):not(.date)+li:not(.oppose) .bubble::before {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#chat_widget .contained section>ul>li {
|
|
animation: fadeIn 0.2s;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
#chat_widget .contained .placeholder {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget .placeholder.show {
|
|
display: block;
|
|
animation: fadeIn 1s;
|
|
}
|
|
|
|
.emojis_grid {
|
|
padding: 0 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
.emojis_grid {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
}
|
|
|
|
.emojis.results,
|
|
.emojis:last-child {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.emojis_grid img {
|
|
text-align: center;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.emojis_grid.main {
|
|
border-bottom: 1px solid rgba(var(--movim-font), 0.12);
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#drawer section:has(.emojis_grid) {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.emojis_grid.results:empty,
|
|
.emojis_grid.results:not(:empty)~.emojis_grid {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget li.main .control.active:hover,
|
|
#chat_widget li.main .primary.active:hover,
|
|
.emojis_grid img:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(var(--movim-font), 0.05);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
#chat_widget textarea#chat_textarea~span.control:hover {
|
|
border-radius: 0.5rem 3rem 3rem 0.5rem;
|
|
}
|
|
|
|
#chat_widget div.quoted {
|
|
border-right: 3px solid var(--movim-accent);
|
|
border-radius: 0 3px 3px;
|
|
}
|
|
|
|
/* Parent */
|
|
|
|
#chat_widget div.parent {
|
|
border-left: 0.25rem solid gray;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
#chat_widget .bubble div div.parent {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
#chat_widget .bubble div+div div.parent {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
#chat_widget div.parent[data-parent-id]:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(var(--movim-font), 0.04);
|
|
}
|
|
|
|
#chat_widget div.parent span,
|
|
#chat_widget div.parent p {
|
|
font-size: 1.6rem;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 2.4rem;
|
|
}
|
|
|
|
#chat_widget .bubble div.parent p {
|
|
color: rgba(var(--movim-font), 0.60);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Date element */
|
|
|
|
li div.bubble:after {
|
|
content: attr(data-publishedprepared);
|
|
line-height: 1.5rem;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
li div.bubble.file:not(.audio):after {
|
|
right: 0;
|
|
bottom: 0.5rem;
|
|
}
|
|
|
|
/* Emojis */
|
|
|
|
#chat_widget .bubble ul.reactions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#chat_widget .bubble.file .reactions {
|
|
margin-right: 4.5rem;
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
#chat_widget .bubble.file .card~.reactions {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#chat_widget .bubble div span.reaction,
|
|
#chat_widget .bubble div span.reply,
|
|
#chat_widget .bubble ul.reactions li {
|
|
list-style-type: none;
|
|
background-color: rgba(var(--movim-background-main), 1);
|
|
color: rgba(var(--movim-font), 0.75);
|
|
padding: 0 0.5rem;
|
|
border-radius: 0.5rem;
|
|
line-height: 3rem;
|
|
font-size: 2rem;
|
|
margin: 0.25rem 0;
|
|
display: inline-flex;
|
|
z-index: 1;
|
|
border: solid 1px transparent;
|
|
box-shadow: var(--elevation-0);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#chat_widget .bubble div span.reaction:hover,
|
|
#chat_widget .bubble div span.reply:hover,
|
|
#chat_widget .bubble ul.reactions li:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(var(--movim-element-action), 0.1);
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
#chat_widget .bubble div span.reaction:active,
|
|
#chat_widget .bubble div span.reply:active,
|
|
#chat_widget .bubble ul.reactions li:active {
|
|
background-color: rgba(var(--movim-element-action), 0.2);
|
|
box-shadow: var(--elevation-0);
|
|
}
|
|
|
|
#chat_widget .bubble ul.reactions li:not(:last-child) {
|
|
margin-right: 0.5rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
#chat_widget .bubble ul.reactions li i {
|
|
padding: 0;
|
|
}
|
|
|
|
#chat_widget .bubble>div {
|
|
padding-right: 7rem;
|
|
margin-right: -7rem;
|
|
position: relative;
|
|
min-width: 3rem;
|
|
}
|
|
|
|
#chat_widget .bubble>div:after {
|
|
font-family: 'Material Symbols';
|
|
content: '\e15e';
|
|
position: absolute;
|
|
right: 0;
|
|
top: -0.5rem;
|
|
background-color: rgba(var(--movim-background-main), 0.5);
|
|
color: rgba(var(--movim-font), 0.8);
|
|
font-size: 2.5rem;
|
|
width: 4rem;
|
|
line-height: 4rem;
|
|
text-align: center;
|
|
border-radius: 2rem;
|
|
transition: opacity 0.25s ease, transform .25s ease;
|
|
transform: translateX(-2rem);
|
|
opacity: 0;
|
|
}
|
|
|
|
#chat_widget .bubble>div.reply:after {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#chat_widget .bubble:not(.file)>div:last-child {
|
|
padding-right: 12rem;
|
|
}
|
|
|
|
#chat_widget .bubble div span.reaction,
|
|
#chat_widget .bubble div span.reply,
|
|
#chat_widget .bubble ul.reactions:empty {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
|
|
#chat_widget li .bubble div:not(.encrypted):hover p:not(.retracted)~ul.reactions:empty~span.reaction,
|
|
#chat_widget li .bubble div:not(.encrypted):hover p:not(.retracted)~span.reply {
|
|
display: inline-flex;
|
|
position: absolute;
|
|
left: calc(100% - 7rem);
|
|
bottom: -0.5rem;
|
|
}
|
|
|
|
#chat_widget li .bubble.file div:not(.encrypted):hover p:not(.retracted)~ul.reactions:empty~span.reaction,
|
|
#chat_widget li .bubble.file div:not(.encrypted):hover p:not(.retracted)~span.reply {
|
|
transform: translateX(-0.75rem);
|
|
}
|
|
|
|
#chat_widget li .bubble div:hover ul.reactions:not(:empty)~span.reply {
|
|
margin-top: -3rem;
|
|
}
|
|
|
|
#chat_widget li .bubble div:hover ul.reactions:empty~span.reaction~span.reply {
|
|
left: calc(100% - 7rem + 3.5rem);
|
|
}
|
|
}
|
|
|
|
#chat_widget .bubble ul.reactions li.reacted {
|
|
border-color: rgba(var(--movim-font), 0.3);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#chat_widget .bubble ul.reactions li img {
|
|
width: 2.25rem;
|
|
height: 3rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-right: 0.5rem;
|
|
order: 0;
|
|
}
|
|
|
|
/* File element */
|
|
|
|
ul.list li>div.bubble.file {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
ul.list li>div.bubble.file ul.card {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
ul.list li>div.bubble.file ul.card+p:empty:before {
|
|
content: ' ';
|
|
}
|
|
|
|
ul.list li>div.bubble.file>div>p>a {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 35rem;
|
|
}
|
|
|
|
ul.list li>div.bubble.file div.file {
|
|
margin-bottom: 3rem;
|
|
border-radius: 0.75rem;
|
|
position: relative;
|
|
}
|
|
|
|
ul.list li.oppose>div.bubble.file div.file {
|
|
text-align: right;
|
|
}
|
|
|
|
li:not(.oppose) .bubble.file span.resource+div.file {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
ul.list li>div.bubble.file div.file img,
|
|
ul.list li>div.bubble.file div.file video {
|
|
display: block;
|
|
width: auto;
|
|
max-height: 200px;
|
|
height: 200px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
li div.bubble.file div.file img {
|
|
max-height: 170px;
|
|
min-width: 12rem;
|
|
object-fit: cover;
|
|
border-radius: 0.75rem;
|
|
background-color: rgba(var(--movim-gray), 0.1);
|
|
background-image: url(/theme/img/broken_image.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
li div.bubble.file video {
|
|
max-height: 200px;
|
|
background-color: rgba(var(--movim-font), 0.15);
|
|
max-width: 100%;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
li.oppose .bubble.file div.file img,
|
|
li.oppose .bubble.file div.file video {
|
|
display: block;
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
ul.list li>div.bubble.file div.file[data-type="image/gif"]:after {
|
|
color: white;
|
|
font-family: 'Material Symbols';
|
|
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
position: absolute;
|
|
font-size: 5rem;
|
|
line-height: 5rem;
|
|
content: "\e908";
|
|
top: 0;
|
|
left: 0.5rem;
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
|
|
ul.list li>div.bubble.file div.file a span.host:after,
|
|
ul.list li>div.bubble.file div.file a span.size:after {
|
|
content: '-';
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
/* Message Info */
|
|
|
|
#chat_widget .bubble .message span.info:after {
|
|
display: inline-block;
|
|
font-family: 'Material Symbols';
|
|
vertical-align: middle;
|
|
font-variation-settings: 'FILL' 1;
|
|
letter-spacing: -0.5rem;
|
|
}
|
|
|
|
#chat_widget .bubble.file .message div.file:before,
|
|
#chat_widget .bubble .message ul.card.list .block:before {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1.5rem;
|
|
font-family: 'Material Symbols';
|
|
color: white;
|
|
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.85);
|
|
font-variation-settings: 'FILL' 1;
|
|
letter-spacing: -0.5rem;
|
|
}
|
|
|
|
#chat_widget .bubble.file .message div.file:before {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
#chat_widget .bubble.file[data-thumbash] {
|
|
background-image: url(attr(data-thumbhash));
|
|
}
|
|
|
|
#chat_widget .bubble .message ul.card.list .block:before {
|
|
color: rgba(var(--movim-font), 0.54);
|
|
}
|
|
|
|
#chat_widget .bubble.file .message.delivered div.file:before,
|
|
#chat_widget .bubble .message.delivered span.info:after,
|
|
#chat_widget .bubble .message.delivered ul.card.list .block:before {
|
|
content: '\e5ca';
|
|
}
|
|
|
|
#chat_widget .bubble.file .message.displayed div.file:before,
|
|
#chat_widget .bubble .message.displayed span.info:after,
|
|
#chat_widget .bubble .message.displayed ul.card.list .block:before {
|
|
content: '\e877';
|
|
}
|
|
|
|
#chat_widget .bubble .message.encrypted span.info:after {
|
|
content: '\e897';
|
|
}
|
|
|
|
#chat_widget .bubble.file .message.edited.delivered div.file:before,
|
|
#chat_widget .bubble .message.edited.delivered span.info:after,
|
|
#chat_widget .bubble .message.edited.delivered ul.card.list .block:before {
|
|
content: '\e3c9 \e5ca';
|
|
}
|
|
|
|
#chat_widget .bubble .message.encrypted.delivered span.info:after {
|
|
content: '\e897 \e5ca';
|
|
}
|
|
|
|
#chat_widget .bubble.file .message.edited.displayed div.file:before,
|
|
#chat_widget .bubble .message.edited.displayed span.info:after,
|
|
#chat_widget .bubble .message.edited.displated ul.card.list .block:before {
|
|
content: '\e3c9 \e877';
|
|
}
|
|
|
|
#chat_widget .bubble .message.encrypted.displayed span.info:after {
|
|
content: '\e897 \e877';
|
|
}
|
|
|
|
#chat_widget .bubble.file .message span.info:after {
|
|
display: block;
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
#chat_widget .bubble.file .message ul.list.card~span.info:after,
|
|
#chat_widget .bubble.file .message div.file~span.info:after {
|
|
display: none;
|
|
}
|
|
|
|
/* Card */
|
|
|
|
#chat_widget .bubble ul.card.list {
|
|
max-width: 45rem;
|
|
width: -webkit-fill-available;
|
|
padding: 0;
|
|
}
|
|
|
|
#chat_widget .bubble ul.card.list.flex.gallery {
|
|
width: auto;
|
|
}
|
|
|
|
/*#chat_widget .bubble ul.card.list li p:first-child {
|
|
margin-right: 2rem;
|
|
}*/
|
|
|
|
#chat_widget .bubble ul.card.list li span.primary:not(.thumb) {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
#chat_widget .bubble ul.card.list li span.primary:not(.thumb) img {
|
|
display: inline-block;
|
|
}
|
|
|
|
#chat_widget .bubble span.resource+ul.card.list li {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
#chat_widget .bubble ul.card.list li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#chat_widget .bubble ul.card.list .info {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget li.oppose .bubble ul.card.list {
|
|
float: right;
|
|
grid-template-columns: none;
|
|
}
|
|
|
|
#chat_widget li.oppose .bubble ul.card.list+* {
|
|
clear: both;
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
|
|
#chat_widget li .bubble ul.card.list+p {
|
|
margin-right: 4.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Reply */
|
|
|
|
#embed:not(:empty),
|
|
#reply:not(:empty) {
|
|
animation: slideUp 0.1s;
|
|
animation-timing-function: var(--decelerate-easing);
|
|
margin: 0 0.5rem;
|
|
border-top: 1px solid rgba(var(--movim-font), 0.12);
|
|
}
|
|
|
|
#reply li {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
/* Counter */
|
|
|
|
#chat_widget #chatheadercounter .counter {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
#chat_widget #chatheadercounter .counter {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Parent scroll */
|
|
|
|
#chat_widget .bubble.scroll_blink {
|
|
animation: backgroundBlink 1s;
|
|
}
|
|
|
|
/* Composing state */
|
|
|
|
#chat_widget .contained section > ul.state > li {
|
|
animation: fadeIn 0.2s, slideUp 0.2s 0.1s var(--decelerate-easing) forwards;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
#chat_widget ul.state {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#chat_widget ul.state span.primary {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#chat_widget ul.state span.dots,
|
|
#chat_widget ul.state span.dots:before,
|
|
#chat_widget ul.state span.dots:after {
|
|
display: block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-color: rgba(var(--movim-font), 0.3);
|
|
border-radius: 1rem;
|
|
float: left;
|
|
margin: 1rem 2rem;
|
|
margin-right: 3rem;
|
|
position: relative;
|
|
animation: loadingFade 2s infinite;
|
|
animation-delay: 0.2s;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
#chat_widget ul.state span.dots:before,
|
|
#chat_widget ul.state span.dots:after {
|
|
display: inline-block;
|
|
position: absolute;
|
|
content: '';
|
|
margin: 0;
|
|
}
|
|
|
|
#chat_widget ul.state span.dots:before {
|
|
left: -1.5rem;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
#chat_widget ul.state span.dots:after {
|
|
right: -1.5rem;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
#chat_widget ul.state .bubble:not(.file) > div:last-child {
|
|
padding-right: 7rem;
|
|
}
|
|
|
|
@keyframes loadingFade {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
/* Decrypted OMEMO files (XEP-0454) */
|
|
#chat_widget .encrypted_media {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#chat_widget img.encrypted_media {
|
|
max-height: 30rem;
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Shared files: a header button, in the menu on phones */
|
|
#chat_widget .context_menu li.files_menu {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 576px) {
|
|
#chat_widget header .files_button {
|
|
display: none;
|
|
}
|
|
|
|
#chat_widget .context_menu li.files_menu {
|
|
display: flex;
|
|
}
|
|
}
|