139 lines
3.2 KiB
SCSS
139 lines
3.2 KiB
SCSS
.Reactions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
margin-top: 0.375rem;
|
|
overflow: visible;
|
|
max-width: calc(var(--max-width) + 2.25rem);
|
|
|
|
.Button {
|
|
--custom-emoji-size: 1.25rem;
|
|
--reaction-background: var(--color-reaction);
|
|
--reaction-background-hover: var(--hover-color-reaction);
|
|
--reaction-text-color: var(--text-color-reaction);
|
|
|
|
.theme-dark & {
|
|
--reaction-background: rgb(255, 255, 255, 0.1);
|
|
--reaction-background-hover: rgb(255, 255, 255, 0.2);
|
|
--reaction-text-color: var(--color-text);
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 1.875rem;
|
|
white-space: nowrap;
|
|
width: auto;
|
|
padding: 0 0.375rem 0 0.25rem;
|
|
background-color: var(--reaction-background) !important;
|
|
border-radius: 1.75rem;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
text-transform: none;
|
|
color: var(--reaction-text-color);
|
|
overflow: visible;
|
|
line-height: 1.75rem;
|
|
|
|
transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
|
|
|
|
.avatars {
|
|
display: flex;
|
|
|
|
.Avatar {
|
|
margin: 0;
|
|
margin-inline-start: -0.25rem;
|
|
border: 0.0625rem solid var(--reaction-background);
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
|
|
&:first-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.message-reaction {
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.reaction-animated-emoji {
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
&.chosen {
|
|
--reaction-background: var(--color-reaction-chosen);
|
|
--reaction-background-hover: var(--hover-color-reaction-chosen);
|
|
--reaction-text-color: var(--text-color-reaction-chosen);
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.theme-dark & {
|
|
--reaction-background: #3390ec;
|
|
--reaction-background-hover: #4096ec;
|
|
}
|
|
|
|
.theme-dark .own & {
|
|
--reaction-background: rgb(255, 255, 255, 0.75);
|
|
--reaction-background-hover: rgb(255, 255, 255, 0.85);
|
|
--reaction-text-color: rgb(62 62 62);
|
|
}
|
|
}
|
|
|
|
.counter {
|
|
margin-inline-end: 0.125rem;
|
|
}
|
|
|
|
&:hover {
|
|
--reaction-background: var(--reaction-background-hover) !important;
|
|
|
|
backdrop-filter: var(--reaction-background-hover-filter);
|
|
|
|
@supports not (backdrop-filter: var(--reaction-background-hover-filter)) {
|
|
filter: var(--reaction-background-hover-filter);
|
|
}
|
|
}
|
|
|
|
&:first-of-type {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
&.is-outside {
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.own &.is-outside {
|
|
flex-direction: row-reverse;
|
|
|
|
.Button {
|
|
&:first-of-type {
|
|
margin-inline-start: 0.125rem;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-inline-end: 0.125rem;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-light &.is-outside .Button {
|
|
--reaction-background: var(--pattern-color);
|
|
--reaction-background-hover: var(--pattern-color);
|
|
--reaction-background-hover-filter: brightness(115%);
|
|
--reaction-text-color: white;
|
|
|
|
&.chosen {
|
|
--reaction-background: rgb(255, 255, 255, 0.6);
|
|
--reaction-background-hover: rgb(255, 255, 255, 0.75);
|
|
--reaction-text-color: rgb(62 62 62);
|
|
}
|
|
}
|
|
}
|