1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-03 16:38:31 +00:00
FrankerFaceZ/styles/dialog.scss
SirStendec 98e5373e9a 4.55.0
* 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.
2023-09-26 17:40:25 -04:00

86 lines
No EOL
1.3 KiB
SCSS

.ffz-dialog {
&:not(.maximized) {
position: absolute;
top: 25%;
left: 25%;
z-index: 99999999;
--width: #{"min(75vw, 128rem)"};
--height: #{"min(75vh, calc(0.75 * var(--width)))"};
top: #{"calc(calc(100vh - var(--height)) / 2)"};
left: #{"calc(calc(100vw - var(--width)) / 2)"};
min-width: 64rem;
min-height: 30rem;
max-width: 75vw;
max-height: 75vh;
width: 75vw;
width: var(--width);
height: 50vh;
height: var(--height);
border-radius: var(--border-radius-extra-large);
> header {
cursor: move;
border-top-left-radius: var(--border-radius-extra-large);
border-top-right-radius: var(--border-radius-extra-large);
}
&.faded {
opacity: 0.5;
&:hover {
opacity: 0.75;
}
}
}
&.maximized {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
&, .tw-root--theme-dark & {
border: none !important;
}
> header {
cursor: default;
padding: .9rem 3rem;
}
}
&.exclusive {
z-index: 1000;
}
.want-ps {
overflow-y: auto;
}
> header {
user-select: none;
padding: .9rem 1rem .9rem 2rem;
.tw-search-input {
max-width: 40rem
}
}
}
.ffz-has-dialog {
position: relative;
& > :not(.ffz-dialog):not(.ffz__tooltip) {
visibility: hidden;
}
}