169 lines
3.9 KiB
SCSS
169 lines
3.9 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
/* @keyframes reaction-activate {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1.75);
|
|
}
|
|
|
|
95% {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(1.25);
|
|
}
|
|
} */
|
|
|
|
.reaction {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-sticker {
|
|
position: relative;
|
|
width: var(--reaction-size);
|
|
height: var(--reaction-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&-activate {
|
|
position: absolute;
|
|
top: var(--reaction-offset);
|
|
right: var(--reaction-offset);
|
|
bottom: var(--reaction-offset);
|
|
left: var(--reaction-offset);
|
|
z-index: 1;
|
|
// animation: reaction-activate 2s linear forwards;
|
|
}
|
|
|
|
&.has-animation {
|
|
> .media-sticker {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&:not(.is-static) {
|
|
.media-sticker {
|
|
--size: calc(var(--reaction-size) + var(--reaction-offset) * -2);
|
|
width: var(--size) !important;
|
|
height: var(--size) !important;
|
|
max-width: var(--size);
|
|
max-height: var(--size);
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-inline {
|
|
--reaction-size: .875rem;
|
|
--reaction-offset: -.4375rem;
|
|
min-width: var(--reaction-size);
|
|
min-height: var(--reaction-size);
|
|
}
|
|
|
|
&-inline &-counter {
|
|
font-size: inherit !important;
|
|
order: -1;
|
|
margin-right: .0625rem !important;
|
|
}
|
|
|
|
&-block {
|
|
--additional-height: .5rem;
|
|
// --padding-horizontal: .5rem;
|
|
--margin: .375rem;
|
|
// --reaction-size: 1.0625rem;
|
|
--reaction-size: 1.375rem;
|
|
--reaction-offset: -.5625rem;
|
|
--background-color: var(--message-highlightning-color);
|
|
--chosen-background-color: var(--message-primary-color);
|
|
--counter-color: #fff;
|
|
--reaction-total-size: calc(var(--reaction-size) + var(--additional-height));
|
|
height: var(--reaction-total-size);
|
|
border-radius: var(--reaction-total-size);
|
|
// padding: 0 .375rem 0 .625rem;
|
|
// padding: 0 var(--padding-horizontal) 0 calc(var(--padding-horizontal) + var(--reaction-size));
|
|
// padding: 0 var(--padding-horizontal);
|
|
padding: 0 .5rem;
|
|
background-color: var(--background-color);
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-top: var(--margin);
|
|
margin-right: var(--margin);
|
|
color: var(--counter-color);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--chosen-background-color);
|
|
// visibility: hidden;
|
|
border-radius: inherit;
|
|
// transform: scale3d(.2, .2, .2);
|
|
transform: scale3d(0, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
&.is-chosen {
|
|
&:not(.backwards) {
|
|
&:before {
|
|
transform: scale3d(1, 1, 1);
|
|
opacity: 1;
|
|
// visibility: visible;
|
|
}
|
|
|
|
.stacked-avatars {
|
|
--border-color: var(--chosen-background-color);
|
|
}
|
|
}
|
|
|
|
&.animating {
|
|
&:before {
|
|
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
|
// transition: transform var(--transition-standard-in);
|
|
}
|
|
|
|
.reaction-counter {
|
|
transition: color var(--transition-standard-in);
|
|
// transition: color 1s linear;
|
|
}
|
|
|
|
.stacked-avatars-avatar-container {
|
|
transition: border-color var(--transition-standard-in);
|
|
}
|
|
}
|
|
}
|
|
|
|
.stacked-avatars {
|
|
--border-color: transparent;
|
|
--border-size: .125rem;
|
|
--margin-right: -.875rem;
|
|
margin-left: .1875rem;
|
|
// margin-right: .0625rem;
|
|
}
|
|
}
|
|
|
|
&-block &-counter {
|
|
font-size: .9375rem !important;
|
|
font-weight: var(--font-weight-bold);
|
|
margin: 0 .0625rem 0 .375rem;
|
|
line-height: 1.125rem;
|
|
position: relative;
|
|
}
|
|
}
|