364 lines
7.7 KiB
SCSS
364 lines
7.7 KiB
SCSS
#middle-column-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: var(--theme-background-color);
|
|
}
|
|
|
|
&::after {
|
|
.theme-light & {
|
|
background-image: url('../../assets/chat-bg.jpg');
|
|
|
|
@media (max-width: 600px) {
|
|
background-image: url('../../assets/chat-bg-mobile.jpg');
|
|
}
|
|
}
|
|
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
body:not(.animation-level-0) #root & {
|
|
transition: transform var(--layer-transition), opacity .2s !important;
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.custom-bg-color > &::before {
|
|
filter: blur(0);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.custom-bg-color:not(.custom-bg-image) > &::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
.custom-bg-image > &::after {
|
|
background-image: var(--custom-background) !important;
|
|
filter: blur(0);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.custom-bg-image.blurred > &::after {
|
|
filter: blur(12px);
|
|
}
|
|
|
|
@media screen and (min-width: 1276px) {
|
|
body.animation-level-2 &::before,
|
|
body.animation-level-2 &::after {
|
|
margin: -16rem -5rem -20rem 0;
|
|
overflow: hidden;
|
|
transform: scale(1);
|
|
transform-origin: left center;
|
|
transition: transform var(--layer-transition);
|
|
}
|
|
|
|
body.animation-level-2 .custom-bg-image > &::after {
|
|
margin: -16rem -5rem -20rem -1rem;
|
|
transition: transform var(--layer-transition);
|
|
}
|
|
|
|
body.animation-level-2 #Main.right-column-open :not(.custom-bg-image) > &::after {
|
|
transform: scale(0.67);
|
|
}
|
|
}
|
|
}
|
|
|
|
#MiddleColumn {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
@media (max-width: 600px) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.messages-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
> .Transition {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.messaging-disabled {
|
|
&-inner {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius-messages);
|
|
background: var(--color-background);
|
|
color: var(--color-text-secondary);
|
|
text-align: center;
|
|
box-shadow: 0 1px 2px var(--color-default-shadow);
|
|
}
|
|
}
|
|
|
|
.Composer {
|
|
#message-compose {
|
|
transform: scaleX(1) translateX(0);
|
|
transition: transform var(--select-transition), border-bottom-right-radius var(--select-transition);
|
|
|
|
&::before {
|
|
transform: scaleX(-1) translateX(0);
|
|
transition: transform var(--select-transition);
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
&, &::before {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-input-wrapper, &::before {
|
|
opacity: 1;
|
|
transition: opacity var(--select-transition);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
> .Button {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: opacity var(--select-transition), transform var(--select-transition);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
&.hover-disabled, &:not(.shown) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:not(.shown) {
|
|
.ComposerEmbeddedMessage {
|
|
height: 0;
|
|
}
|
|
|
|
#message-compose {
|
|
transform: scaleX(var(--composer-hidden-scale, 1)) translateX(var(--composer-translate-x, 0));
|
|
border-bottom-right-radius: var(--border-radius-messages);
|
|
|
|
&::before {
|
|
transform: scaleX(-1) translateX(200%);
|
|
}
|
|
}
|
|
|
|
#editable-message-text {
|
|
height: 3.5rem !important;
|
|
|
|
@media (max-width: 600px) {
|
|
height: 2.5rem !important;
|
|
}
|
|
}
|
|
|
|
.message-input-wrapper, &::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
> .Button {
|
|
opacity: 0 !important;
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.messaging-disabled {
|
|
transform: scaleX(1);
|
|
transition: transform var(--select-transition);
|
|
|
|
.messaging-disabled-inner span {
|
|
opacity: 1;
|
|
transition: opacity var(--select-transition);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
|
|
&:not(.shown) {
|
|
transform: scaleX(var(--composer-hidden-scale, 1));
|
|
pointer-events: none;
|
|
|
|
.messaging-disabled-inner span {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle-column-footer {
|
|
width: 100%;
|
|
max-width: var(--messages-container-width);
|
|
padding: 0 1rem;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
z-index: var(--z-middle-footer);
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
transition: transform var(--layer-transition);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none !important;
|
|
}
|
|
|
|
@media (min-width: 1276px) {
|
|
width: calc(100% - var(--right-column-width));
|
|
|
|
#Main.right-column-open & {
|
|
transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
padding: 0 0.5rem;
|
|
|
|
body.is-symbol-menu-open & {
|
|
transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
|
|
opacity: 0;
|
|
transition: opacity 350ms ease;
|
|
|
|
@media (max-width: 600px) {
|
|
left: -2%;
|
|
right: -2%;
|
|
}
|
|
}
|
|
|
|
&.with-notch::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
html.theme-dark &::before {
|
|
background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Common styles for message list fade-out shadow */
|
|
.Composer,
|
|
.MessageSelectToolbar,
|
|
.messaging-disabled {
|
|
margin-bottom: 1.25rem;
|
|
|
|
@media (max-width: 600px) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.Composer,
|
|
.MessageSelectToolbar,
|
|
.unpin-all-button,
|
|
.messaging-disabled {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.MessageSelectToolbar-inner,
|
|
.unpin-all-button,
|
|
.messaging-disabled {
|
|
.mask-image-disabled & {
|
|
box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
|
|
}
|
|
}
|
|
|
|
.unpin-button-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
padding-bottom: 1.25rem;
|
|
|
|
.unpin-all-button {
|
|
text-transform: capitalize;
|
|
color: var(--color-black);
|
|
height: 3.5rem;
|
|
overflow: visible;
|
|
transform: scaleX(1);
|
|
transition: transform var(--select-transition), background-color .15s, color .15s;
|
|
|
|
&:hover {
|
|
.icon-unpin {
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
|
|
.select-mode-active + .middle-column-footer & {
|
|
box-shadow: none;
|
|
transform: scaleX(var(--unpin-hidden-scale));
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.icon-unpin {
|
|
margin-inline-start: -0.4375rem;
|
|
margin-inline-end: .75rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.5rem;
|
|
transition: color .15s
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.mask-image-disabled &::before {
|
|
background: unset;
|
|
}
|
|
}
|