mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-04 00:48:32 +00:00
98e5373e9a
* Added: Link Cards. As an option, you can open a preview card when clicking on links in chat. These preview cards function similarly to the existing tool-tip or rich embed options but can provide for enhanced interaction (e.g. an embedded video player), with potential for more in the future. * Changed: When using a custom theme with a dark background, use lighter border colors. * Changed: Draw the FFZ Control Center and other dialogs with rounded corners. * Fixed: Issue when clicking certain global Twitch emotes preventing the emote card from appearing correctly. * Fixed: Issue with URL/safety data not being loaded correctly from the link service when the overall result was an error. * Fixed: Issue with link tool-tips still appearing, but with no content, when link tool-tips are disabled. * Fixed: Issue where (re)subscription notices in chat for multiple-month-at-once subscriptions would not be displayed correctly. * Fixed: Tool-tips not displaying correctly in chat pop-outs in some circumstances. * Fixed: Incorrect border styles when the chat is in portrait mode. * Experiment Added: Set up an MQTT-based PubSub system. Let's see how well this scales.
164 lines
No EOL
3.5 KiB
SCSS
164 lines
No EOL
3.5 KiB
SCSS
#root {
|
|
--ffz-player-width: calc(100vw - var(--ffz-portrait-extra-width));
|
|
--ffz-player-height: calc(calc(calc(var(--ffz-player-width) * 0.5625) + var(--ffz-portrait-extra-height)));
|
|
--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
|
|
--ffz-chat-height: calc(100vh - var(--ffz-player-height));
|
|
|
|
.chat-shell .ffz--chat-card {
|
|
--width: max(30rem, min(50%, calc(1.5 * var(--ffz-chat-width))));
|
|
width: var(--width);
|
|
margin-left: min(2rem, calc(100% - calc(4rem + var(--width))));
|
|
}
|
|
|
|
& > div:first-child > div[class^="Layout-sc"] {
|
|
.ffz--portrait-invert & {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: var(--ffz-chat-height) !important;
|
|
}
|
|
|
|
height: var(--ffz-player-height) !important;
|
|
}
|
|
|
|
.channel-root__player--with-chat {
|
|
max-height: var(--ffz-player-height) !important;
|
|
}
|
|
|
|
.persistent-player.persistent-player__border--mini {
|
|
pointer-events: none;
|
|
|
|
body:not(.ffz--portrait-invert) & {
|
|
bottom: var(--ffz-chat-height) !important;
|
|
}
|
|
|
|
> * {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.picture-by-picture-player {
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
right: 5rem;
|
|
height: 20vh;
|
|
width: calc(20vh * calc(16 / 9)) !important;
|
|
}
|
|
|
|
.persistent-player.persistent-player--theatre {
|
|
.ffz--portrait-invert & {
|
|
top: unset !important;
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
body:not(.ffz--portrait-invert) & {
|
|
top: 0 !important;
|
|
bottom: unset !important;
|
|
}
|
|
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
height: var(--ffz-theater-height) !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.whispers--theatre-mode {
|
|
bottom: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
.channel-root__right-column--expanded {
|
|
min-height: unset !important;
|
|
}
|
|
|
|
.right-column {
|
|
display: unset !important;
|
|
position: fixed !important;
|
|
z-index: 2000;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
height: var(--ffz-chat-height) !important;
|
|
width: unset !important;
|
|
|
|
body:not(.ffz--portrait-invert) & {
|
|
top: unset !important;
|
|
bottom: 0 !important;
|
|
border-top: 1px solid var(--color-border-base);
|
|
}
|
|
|
|
.ffz--portrait-invert & {
|
|
top: 0 !important;
|
|
bottom: unset !important;
|
|
border-bottom: 1px solid var(--color-border-base);
|
|
}
|
|
|
|
& > .tw-full-height {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.right-column__toggle-visibility {
|
|
//position: fixed !important;
|
|
|
|
/*body:not(.ffz--portrait-invert) & {
|
|
top: 6.5rem;
|
|
}
|
|
|
|
.ffz--portrait-invert & {
|
|
top: calc(var(--ffz-chat-height) + 6.5rem);
|
|
}
|
|
|
|
right: .5rem;
|
|
left: unset !important;*/
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.emote-picker__nav-content-overflow,
|
|
.emote-picker__tab-content {
|
|
max-height: calc(var(--ffz-chat-height) - 26rem);
|
|
}
|
|
|
|
.emote-picker__nav-content-overflow {
|
|
height: 100% !important;
|
|
}
|
|
|
|
&.right-column--theatre {
|
|
.ffz--portrait-invert & {
|
|
bottom: unset !important;
|
|
}
|
|
|
|
body:not(.ffz--portrait-invert) & {
|
|
top: unset !important;
|
|
}
|
|
|
|
height: calc(100vh - var(--ffz-theater-height)) !important;
|
|
|
|
.emote-picker__nav-content-overflow,
|
|
.emote-picker__tab-content {
|
|
max-height: calc(calc(100vh - var(--ffz-theater-height)) - 26rem);
|
|
}
|
|
}
|
|
|
|
.video-chat {
|
|
flex-basis: unset;
|
|
}
|
|
|
|
.video-watch-page__right-column,
|
|
.clips-watch-page__right-column,
|
|
.channel-videos__right-column,
|
|
|
|
.channel-clips__sidebar,
|
|
.channel-events__sidebar,
|
|
.channel-follow-listing__right-column,
|
|
.channel-root__right-column,
|
|
.channel-page__right-column {
|
|
width: 100% !important;
|
|
|
|
& > div {
|
|
border-left: none !important;
|
|
}
|
|
}
|
|
}
|
|
} |