mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-03 16:38:31 +00:00
6e78fd7cab
This update adds a check that forces users to agree to YouTube's Terms of Service before they are able to view rich embeds for YouTube links. I personally do not agree with this, but we were required to implement this in order to maintain access to YouTube's API. Actually, they said "API Clients must state in their own terms of use that, by using those API Clients, users are agreeing to be bound by the YouTube Terms of Service." but that's obviously ridiculous for this use case. This is my compromise. Sorry for the inconvenience, everyone. This also comes with aesthetic tweaks to make YouTube's compliance team happy. Woo... * Added: Setting to display labels on highlighted chat messages giving the reason why the message was highlighted. * Added: System to force users to agree to a service's Terms of Service before displaying rich content from specific providers. So far this is only used by YouTube. * Changed: Made the background of highlighted words in chat messages slightly smaller. * Fixed: A few page elements in mod view not being themed correctly. * Fixed: Timestamps displaying with an hour when they obviously do not need to. * API Added: `main_menu:open` event for a general way to open the main menu. * API Added: Settings UI elements using components using the `provider-mixin` can now override the provider key they use by setting an `override_setting` value on their definition. * API Changed: The `chat.addHighlightReason(key, data, label)` method now takes an optional `label` parameter to set the text that appears on chat messages when the setting to display labels is enabled.
164 lines
2.9 KiB
SCSS
164 lines
2.9 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__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;
|
|
}
|