336 lines
6.9 KiB
SCSS
336 lines
6.9 KiB
SCSS
#middle-column-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
#MiddleColumn {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
min-width: 0;
|
|
|
|
@media (max-width: 600px) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.messages-layout {
|
|
--slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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), background-color 0.15s,
|
|
color 0.15s;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
&-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);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
|
|
transition: top 200ms, 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);
|
|
}
|
|
}
|
|
|
|
&:not(.no-composer) {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
top: 0;
|
|
|
|
body.keyboard-visible & {
|
|
top: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.5625rem;
|
|
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,
|
|
.join-subscribe-button,
|
|
.messaging-disabled {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.MessageSelectToolbar-inner,
|
|
.unpin-all-button,
|
|
.join-subscribe-button,
|
|
.messaging-disabled {
|
|
.mask-image-disabled & {
|
|
box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
|
|
border-radius: var(--border-radius-messages);
|
|
}
|
|
}
|
|
|
|
.middle-column-footer-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);
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
.icon-unpin {
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
&:active,
|
|
&:focus {
|
|
.icon-unpin {
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-unpin {
|
|
margin-inline-start: -0.4375rem;
|
|
margin-inline-end: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.5rem;
|
|
transition: color 0.15s;
|
|
}
|
|
}
|
|
|
|
.join-subscribe-button,
|
|
.unpin-all-button {
|
|
height: 3.5rem;
|
|
transform: scaleX(1);
|
|
transition: transform var(--select-transition), background-color 0.15s, color 0.15s;
|
|
|
|
.select-mode-active + .middle-column-footer & {
|
|
box-shadow: none;
|
|
transform: scaleX(var(--unpin-hidden-scale));
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.mask-image-disabled &::before {
|
|
background: unset;
|
|
}
|
|
}
|