mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 12:55:55 +00:00
d078d6e3a9
used `sass-migrator` and some manual intervention to migrate all of the
`@import`s to `@use` statements.
1. needed to prefix all of the `styles/main.scss` imports to use a
relative path (i.e. `../../../../styles/main.scss`
2. needed to add a `@use "container"` to `styles/tab-container` so it
could resolve its `@extend`s
- not sure if this was just an ordering issue or what, but it works
164 lines
2.9 KiB
SCSS
164 lines
2.9 KiB
SCSS
@use 'icons';
|
|
@use 'tooltips';
|
|
@use 'widgets';
|
|
@use 'dialog';
|
|
|
|
@use 'native/index';
|
|
@use 'structure/index' as index2;
|
|
|
|
@use '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__tooltip .ffz-c-text-youtube,
|
|
.tw-root--theme-dark .ffz-c-text-youtube {
|
|
color: #fff !important;
|
|
}
|
|
.tw-root--theme-dark .ffz__tooltip .ffz-c-text-youtube,
|
|
.ffz-c-text-youtube {
|
|
color: #212121 !important;
|
|
}
|
|
|
|
.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;
|
|
}
|