mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 21:05:53 +00:00
880e80388a
* Added: Emote cards are now at parity with vanilla Twitch emote cards when it comes to displaying Twitch emotes, including the ability to follow/subscribe to the source channel, view their other emotes, and report emotes. * Added: Emote cards for FFZ emotes now allow you to add an emote to any collection you can manage. * Added: Emote cards for other emotes now have an action to open the emote on the source service's webpage. * Fixed: Effect emotes not appearing when used incorrectly in chat. * Fixed: Rebuild the tab-completion emote array in a way more likely to cause Twitch's native input element to update when we change our emotes. * Changed: Use a higher contrast "New" pill when displaying new items in the FFZ Control Center. (Closes #1348) * Changed: Push the modular chat line rendering experiment to 100% roll-out.
155 lines
No EOL
2.7 KiB
SCSS
155 lines
No EOL
2.7 KiB
SCSS
@import 'icons';
|
|
@import 'tooltips';
|
|
@import 'widgets';
|
|
@import 'dialog';
|
|
|
|
@import 'native/index';
|
|
@import 'structure/index';
|
|
|
|
@import 'chat';
|
|
|
|
@keyframes ffz-rotateplane {
|
|
0% { transform: rotateY(90deg) rotateX(180deg) }
|
|
25% { transform: rotateY(0deg) rotateX(180deg) }
|
|
75% { transform: rotateY(0deg) rotateX(0deg) }
|
|
100% { transform: rotateY(90deg) rotateX(0deg) }
|
|
}
|
|
|
|
@keyframes ffz-gentle-shake {
|
|
0% { transform: translate(20px) }
|
|
20% { transform: translate(-20px) }
|
|
40% { transform: translate(10px) }
|
|
60% { transform: translate(-10px) }
|
|
80% { transform: translate(5px) }
|
|
100% { transform: translate(0) }
|
|
}
|
|
|
|
@keyframes ffz--fade {
|
|
0% { opacity: 1 }
|
|
50% { opacity: 0.5 }
|
|
100% { opacity: 1 }
|
|
}
|
|
|
|
@keyframes ffz-rotate {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.ffz--inline {
|
|
display: inline;
|
|
}
|
|
|
|
.ffz--player-meta-tray {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
margin-bottom: 0.5rem;
|
|
|
|
display: inline-flex;
|
|
color: var(--color-text-overlay);
|
|
|
|
.ffz-stat {
|
|
background-color: var(--color-background-pill);
|
|
color: var(--color-text-overlay);
|
|
display: inline-block;
|
|
position: relative;
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
border-radius: 1000px;
|
|
padding: 0.3rem 0.5rem;
|
|
font-size: 75%;
|
|
}
|
|
|
|
.ffz-stat-text {
|
|
font-family: "Helvetica Neue",sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
|
|
.ffz-new-indicator {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
|
|
background-color: var(--color-fill-new-item-indicator);
|
|
border-radius: var(--border-radius-rounded);
|
|
}
|
|
|
|
.emote-picker-tab-item .ffz-new-indicator {
|
|
top: 0.25rem;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.ffz--rotate {
|
|
animation: ffz-rotate 2s infinite linear;
|
|
}
|
|
|
|
.ffz--shaking {
|
|
animation: ffz-gentle-shake 0.4s 1 linear;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ffz--shaking {
|
|
animation: fade 0.4s 1 linear;
|
|
}
|
|
}
|
|
|
|
.ffz-i-t-reset.loading,
|
|
.ffz-i-t-reset-clicked.loading,
|
|
.ffz-i-zreknarf.loading {
|
|
animation: ffz-rotateplane 1.2s infinite linear;
|
|
}
|
|
|
|
.ffz-c-text-inherit {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.ffz-mg-r--05 {
|
|
margin-right: -0.5rem !important;
|
|
}
|
|
|
|
.ffz-mg-t-1p {
|
|
margin-top: 1px !important;
|
|
}
|
|
|
|
.ffz-mg-l--05 {
|
|
margin-left: -0.5rem !important;
|
|
}
|
|
|
|
.ffz--links {
|
|
order: 10;
|
|
}
|
|
|
|
.ffz-aspect {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
> :not(.ffz-aspect__spacer) {
|
|
position: absolute;
|
|
left: 0;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.ffz-aspect--overflow {
|
|
overflow: visible
|
|
}
|
|
|
|
.ffz-aspect--align-top > :not(.ffz-aspect__spacer) {
|
|
top: 0;
|
|
}
|
|
|
|
.ffz-aspect--align-center > :not(.ffz-aspect__spacer) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.ffz-aspect--align-bottom > :not(.ffz-aspect__spacer) {
|
|
bottom: 0;
|
|
} |