mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 21:05:53 +00:00
0d433c3ebd
* Changed: Refactor player code to be shared between the embed/popout player and the main player. * Changed: Place metadata above the player controls in embed/popout player to better handle very narrow players. * Changed: Support clicking Stream Uptime metadata in the embed/popout player to copy a link to the past broadcast at the current time. * Fixed: The player being an incorrect height in portrait mode in some cases. * Fixed: Schedule data disappearing when FFZ boots while viewing the Schedule page due to how we send layout update events.
101 lines
No EOL
1.7 KiB
SCSS
101 lines
No EOL
1.7 KiB
SCSS
@import 'icons';
|
|
@import 'tooltips';
|
|
@import 'widgets';
|
|
@import 'dialog';
|
|
|
|
@import 'input/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) }
|
|
}
|
|
|
|
|
|
.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-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;
|
|
} |