759 lines
14 KiB
SCSS
759 lines
14 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
.pinned-message {
|
|
&-border {
|
|
position: relative;
|
|
height: 2rem;
|
|
width: .125rem;
|
|
flex: 0 0 auto;
|
|
// padding: .125rem 0;
|
|
|
|
&-wrapper-1 {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 2rem;
|
|
width: .125rem;
|
|
border-radius: 1px;
|
|
background: var(--primary-color);
|
|
}
|
|
|
|
&-mask {
|
|
--mask-height: .375rem;
|
|
--height: 2.5rem;
|
|
height: var(--height);
|
|
overflow: hidden;
|
|
/* mask-image: linear-gradient(to bottom, transparent 0, black var(--mask-height), black calc(var(--height) - var(--mask-height)), transparent var(--height));
|
|
|
|
&.mask-top {
|
|
mask-image: linear-gradient(to bottom, transparent 0, black var(--mask-height));
|
|
}
|
|
|
|
&.mask-bottom {
|
|
mask-image: linear-gradient(to bottom, black calc(var(--height) - var(--mask-height)), transparent var(--height));
|
|
} */
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
content: " ";
|
|
display: block;
|
|
z-index: 1;
|
|
height: var(--mask-height);
|
|
opacity: 0;
|
|
|
|
@include animation-level(2) {
|
|
transition: opacity .2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
top: 0;
|
|
background: linear-gradient(var(--surface-color), transparent);
|
|
}
|
|
|
|
&:after {
|
|
bottom: 0;
|
|
background: linear-gradient(transparent, var(--surface-color));
|
|
}
|
|
|
|
&.mask-top:before,
|
|
&.mask-bottom:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-wrapper {
|
|
color: var(--primary-color);
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: " ";
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
background: var(--primary-color);
|
|
opacity: .4;
|
|
}
|
|
}
|
|
|
|
&-bars {
|
|
stroke: currentColor;
|
|
stroke-width: 2px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
&-mark {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 2px;
|
|
background: currentColor;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
body:not(.animation-level-0) & {
|
|
&-wrapper,
|
|
&-mark {
|
|
will-change: transform;
|
|
transition: transform .25s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
--height: 32px;
|
|
height: var(--height);
|
|
}
|
|
|
|
&-media {
|
|
border-radius: .1875rem;
|
|
}
|
|
}
|
|
|
|
.pinned-message,
|
|
.reply {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
user-select: none;
|
|
|
|
/* &.is-media {
|
|
.emoji:first-child {
|
|
margin: 0 .25rem 0 0;
|
|
}
|
|
} */
|
|
|
|
&-content {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
position: relative;
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
&-title {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
&-title,
|
|
&-subtitle {
|
|
font-size: var(--font-size-14);
|
|
line-height: var(--line-height-14);
|
|
position: relative; // ! WARNING (for custom emoji)
|
|
|
|
@include text-overflow();
|
|
}
|
|
|
|
&-media {
|
|
height: 2rem !important;
|
|
width: 2rem !important;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
top: .125rem;
|
|
|
|
&.is-round {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// sticker
|
|
/* > img {
|
|
object-fit: contain !important;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
} */
|
|
> img,
|
|
> video {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
//color: var(--primary-color);
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
img.emoji {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* span.emoji {
|
|
font-size: 1rem;
|
|
vertical-align: unset;
|
|
} */
|
|
}
|
|
|
|
.reply {
|
|
&.is-media {
|
|
.reply-content {
|
|
padding-left: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* html.no-touch &:hover {
|
|
background-color: var(--light-secondary-text-color);
|
|
} */
|
|
|
|
&-border {
|
|
height: 2rem;
|
|
border-radius: 1px;
|
|
min-width: 2px;
|
|
background: var(--primary-color);
|
|
}
|
|
|
|
/* &-content {
|
|
height: 2rem;
|
|
} */
|
|
|
|
&-content {
|
|
margin-left: .625rem;
|
|
}
|
|
|
|
&-media {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
&-cancel {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
&-title {
|
|
margin: -1px 0 1px;
|
|
}
|
|
|
|
.peer-title {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
}
|
|
|
|
.pinned-container {
|
|
--container-height: 3.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
overflow: visible;
|
|
cursor: pointer;
|
|
|
|
&.is-floating {
|
|
position: absolute !important;
|
|
top: var(--topbar-height);
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
width: auto;
|
|
height: var(--container-height);
|
|
max-height: var(--container-height);
|
|
background-color: var(--surface-color) !important;
|
|
// box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
|
|
// box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 10%);
|
|
|
|
.pinned-container-wrapper {
|
|
order: 0;
|
|
padding: 0 1rem;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
z-index: 0;
|
|
max-width: 100%;
|
|
|
|
@include respond-to(handhelds) {
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
/* &-utils {
|
|
position: relative;
|
|
z-index: 0;
|
|
} */
|
|
}
|
|
|
|
.pinned-container-content {
|
|
margin-right: .5rem;
|
|
|
|
@include respond-to(medium-screens) {
|
|
body.is-right-column-shown & {
|
|
padding-right: var(--right-column-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* &:before {
|
|
content: " ";
|
|
height: 1px;
|
|
background-color: var(--border-color);
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
} */
|
|
|
|
&:before {
|
|
content: " ";
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
// &:before {
|
|
// width: 100%;
|
|
// content: " ";
|
|
// height: 52px;
|
|
// left: 0;
|
|
// top: 0;
|
|
// position: absolute;
|
|
// /* box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .15); */
|
|
// box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, .15);
|
|
// }
|
|
}
|
|
|
|
&-content {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-icon {
|
|
font-size: 1.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
// z-index: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
padding: .25rem;
|
|
border-radius: .25rem;
|
|
order: 1;
|
|
|
|
&-utils {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* html.no-touch &:hover {
|
|
background-color: var(--light-secondary-text-color);
|
|
} */
|
|
}
|
|
}
|
|
|
|
.pinned-message {
|
|
// display: none;
|
|
display: flex;
|
|
width: auto;
|
|
|
|
&-content {
|
|
overflow: visible !important; // * fix blinking in Safari iOS, transform overflow
|
|
}
|
|
|
|
&-media-container {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
position: absolute;
|
|
margin-left: -.25rem;
|
|
|
|
@include animation-level(2) {
|
|
transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
|
|
}
|
|
}
|
|
|
|
/* &-media {
|
|
transform: none !important;
|
|
|
|
&.is-hiding {
|
|
&.backwards {
|
|
|
|
}
|
|
}
|
|
} */
|
|
|
|
// * fix blink in safari, can't add translateX from nowhere...
|
|
&-title,
|
|
&-subtitle {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&.is-media {
|
|
.pinned-message-title,
|
|
.pinned-message-subtitle {
|
|
transform: translateX(2.25rem);
|
|
//overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
&:not(.is-media) &-media-container {
|
|
transform: scale(0);
|
|
//opacity: 0;
|
|
}
|
|
|
|
.pinned-container-wrapper {
|
|
min-width: 16rem;
|
|
}
|
|
|
|
&:not(.is-floating) {
|
|
margin-right: 1rem;
|
|
//width: 15.5rem;
|
|
|
|
/* .pinned-message-content {
|
|
margin-right: 2.25rem;
|
|
} */
|
|
|
|
.pinned-container-wrapper-utils {
|
|
display: none;
|
|
}
|
|
|
|
> .pinned-message-close {
|
|
display: flex;
|
|
margin-right: .75rem;
|
|
order: 0;
|
|
}
|
|
}
|
|
|
|
&.is-media {
|
|
.pinned-message-title,
|
|
.pinned-message-subtitle {
|
|
width: calc(100% - 2.25rem);
|
|
}
|
|
}
|
|
|
|
&.is-floating {
|
|
--container-height: var(--pinned-message-height);
|
|
/* .chat:not(.type-discussion) & {
|
|
.pinned-container-wrapper {
|
|
padding-right: 3rem;
|
|
}
|
|
} */
|
|
|
|
> .btn-icon {
|
|
display: none;
|
|
}
|
|
|
|
.pinned-container-wrapper {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.pinned-container-content {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
.pinned-message-title,
|
|
.pinned-message-subtitle {
|
|
position: relative;
|
|
height: calc(var(--height) / 2);
|
|
min-height: calc(var(--height) / 2);
|
|
overflow: visible;
|
|
|
|
@include animation-level(2) {
|
|
transition: transform var(--pm-transition);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
margin-top: -.125rem;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
&-subtitle {
|
|
.animated-super-row {
|
|
font-size: var(--font-size-14);
|
|
line-height: 16px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.animated-counter {
|
|
transition: transform var(--pm-transition), opacity var(--pm-transition);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
&:before {
|
|
content: "#";
|
|
}
|
|
|
|
&.is-last {
|
|
&:not(.backwards) {
|
|
transform: scale(0.68);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* .animated-super-row {
|
|
transition: none !important;
|
|
} */
|
|
}
|
|
}
|
|
|
|
.animated-super-row {
|
|
--translateY: 16px;
|
|
}
|
|
|
|
.pinned-message-media {
|
|
--translateY: 32px;
|
|
}
|
|
|
|
/* .animated-super-row.is-hiding {
|
|
&.from-top {
|
|
transform: translateY(-16px);
|
|
}
|
|
|
|
&.from-bottom {
|
|
transform: translateY(16px);
|
|
}
|
|
}
|
|
|
|
.pinned-message-media.is-hiding {
|
|
&.from-top {
|
|
transform: translateY(-32px);
|
|
}
|
|
|
|
&.from-bottom {
|
|
transform: translateY(32px);
|
|
}
|
|
} */
|
|
|
|
|
|
&.hide ~ .tgico-pinlist,
|
|
&:not(.is-many) ~ .tgico-pinlist {
|
|
display: none;
|
|
}
|
|
|
|
&.is-many {
|
|
.pinned-message-close {
|
|
display: none;
|
|
}
|
|
|
|
&:not(.is-floating) {
|
|
.pinned-message-pinlist {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.is-floating {
|
|
.pinned-message-close {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.is-many) {
|
|
.pinned-message-pinlist {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-pinlist {
|
|
order: 2;
|
|
}
|
|
|
|
.chat.type-discussion & {
|
|
.pinned-container-close {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pinned-audio {
|
|
--progress-height: .25rem;
|
|
|
|
&.is-floating {
|
|
--container-height: var(--pinned-audio-height);
|
|
// z-index: 1; // fix z-index for volume selector
|
|
}
|
|
|
|
&:not(.is-floating) {
|
|
padding-right: 1.75rem;
|
|
max-width: 210px;
|
|
position: relative;
|
|
}
|
|
|
|
/* &.is-floating .pinned-audio-ico {
|
|
margin-left: -.25rem;
|
|
} */
|
|
|
|
.pinned-container-wrapper {
|
|
overflow: visible !important;
|
|
|
|
> .btn-icon {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
&-ico {
|
|
&:before {
|
|
content: $tgico-play;
|
|
}
|
|
|
|
&.flip-icon:before {
|
|
content: $tgico-pause;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
&-subtitle {
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
&-title,
|
|
&-subtitle {
|
|
font-size: var(--font-size-14);
|
|
line-height: var(--line-height-14);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
|
|
@include text-overflow();
|
|
}
|
|
|
|
&-content {
|
|
margin-left: .75rem;
|
|
}
|
|
|
|
&-progress {
|
|
--border-radius: 0;
|
|
--height: var(--progress-height);
|
|
--translateY: .125rem;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: scaleX(var(--topbar-floating-scaleX)) translateY(var(--translateY));
|
|
transform-origin: left center;
|
|
|
|
@include sidebar-transform(false, false);
|
|
|
|
&:before {
|
|
@include animation-level(2) {
|
|
transition: opacity .2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&:not(:hover):before {
|
|
opacity: 0;
|
|
}
|
|
|
|
@include hover() {
|
|
--translateY: 0;
|
|
}
|
|
|
|
.progress-line {
|
|
&__filled {
|
|
&:after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&__seek {
|
|
top: -1rem;
|
|
}
|
|
}
|
|
|
|
&-wrapper {
|
|
position: absolute;
|
|
height: .5rem;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&-volume {
|
|
align-items: center;
|
|
position: relative;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
|
|
html.is-touch & {
|
|
display: none;
|
|
}
|
|
|
|
&-tunnel {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -1rem;
|
|
content: " ";
|
|
}
|
|
|
|
.player-volume__icon {
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.progress-line {
|
|
&-container {
|
|
position: absolute;
|
|
top: 100%;
|
|
width: 5rem;
|
|
padding: .75rem 1rem;
|
|
margin-top: 2.25rem;
|
|
transform: rotate(270deg);
|
|
border-radius: $border-radius-medium;
|
|
background-color: var(--surface-color);
|
|
box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 15%);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .2s ease-in-out, visibility 0s .2s;
|
|
|
|
// make a tunnel so volume won't hide during moving the cursor
|
|
/* &:before {
|
|
position: absolute;
|
|
top: -50%;
|
|
left: 0;
|
|
right: -1rem;
|
|
content: " ";
|
|
} */
|
|
|
|
@include animation-level(0) {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover, &:active {
|
|
.progress-line-container {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: opacity .2s ease-in-out, visibility 0s 0s;
|
|
}
|
|
}
|
|
}
|
|
}
|