1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-03 16:38:31 +00:00
This release implements a massive change to how link tool-tips and embeds work. They might act up a bit while we get the new back-end installed and tweaked.

* Added: Options to use custom formats for dates and times, under `Appearance > Localization`.
* Added: Options to change the colors of tool-tips.
* Changed: Completely rewrite how link information is formatted together with a complete rewrite of the link information service.
* Changed: The FFZ Control Center now remembers you previously open settings if you reload the page.
* Fixed: Update chat lines when i18n data loads.
* Fixed: i18n not correctly formatting certain numbers.
* Fixed: Theater mode automatically enabling on user home pages. (Closes #866)
* Fixed: Theater metadata overlapping chat with Swap Sidebars enabled. (Closes #835)
* API Added: New icons: `location`, `link`, and `volume-off`
* API Fixed: `createElement` not properly handling `<video>` related attributes.
This commit is contained in:
SirStendec 2020-08-04 18:26:11 -04:00
parent eec65551fb
commit 6310a2ed49
49 changed files with 2432 additions and 884 deletions

View file

@ -26,6 +26,260 @@
vertical-align: middle;
}
.ffz--line-clamp {
display: -webkit-box;
-webkit-line-clamp: var(--ffz-lines);
-webkit-box-orient: vertical;
overflow: hidden;
}
.ffz--rich-header {
line-height: 1.4;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.ffz--overlay {
position: relative;
& > :not(.ffz--overlay__content) {
position: absolute;
z-index: 1;
background-color: var(--color-background-overlay);
color: var(--color-text-overlay);
padding: 0 0.5rem;
border-radius: 4px;
}
.ffz--overlay__content {
width: 100%;
height: 100%;
}
.ffz--overlay__bit {
max-width: calc(100% - 1rem);
&[data-side="top-left"],
&[data-side="top"],
&[data-side="top-right"] {
top: 0.5rem;
}
&[data-side="bottom-left"],
&[data-side="bottom"],
&[data-side="bottom-right"] {
bottom: 0.5rem;
}
&[data-side="top-left"],
&[data-side="left"],
&[data-side="bottom-left"] {
left: 0.5rem;
}
&[data-side="top-right"],
&[data-side="right"],
&[data-side="bottom-right"] {
right: 0.5rem;
}
&[data-side="left"], &[data-side="right"] {
top: 50%;
transform: translateY(-50%);
}
&[data-side="top"], &[data-side="bottom"] {
left: 50%;
transform: translateX(-50%);
}
&[data-side="center"] {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ffz--rich-gallery & {
&[data-side="top-left"],
&[data-side="top"],
&[data-side="top-right"] {
top: 1rem;
}
&[data-side="bottom-left"],
&[data-side="bottom"],
&[data-side="bottom-right"] {
bottom: 1rem;
}
}
}
}
.ffz--header-image {
height: 4.8rem;
max-width: 25%;
img {
object-fit: contain;
height: 100%;
}
&.ffz--header-aspect img {
object-fit: cover;
width: 100%;
}
}
.ffz--compact-header .ffz--header-image {
height: 2.4rem;
}
.ffz--rich-gallery, .ffz--compact-header {
&:not(:first-child) {
margin-top: 0.5rem;
}
&:not(:last-child) {
margin-bottom: 0.5rem;
}
}
.ffz--corner-flag {
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
border-width: 0 3em 3em 0;
z-index: 100;
figure {
position: absolute;
top: 0;
right: -2.75em;
}
}
.ffz--corner-flag__warn {
border-right-color: #f33;
color: #fff;
.tw-root--theme-dark & {
border-right-color: #900;
}
}
.ffz--fields {
display: flex;
margin-top: -.5rem;
margin-left: -.5rem;
flex-flow: row wrap;
.ffz--field {
margin-top: 0.5rem;
margin-left: 0.5rem;
width: 100%;
}
.ffz--field-inline {
flex: 1;
width: unset;
min-width: 150px;
}
}
.ffz--twitter-badge {
height: 1.2rem;
width: 1.2rem;
background: url('//cdn.frankerfacez.com/static/twitter_sprites.png');
display: inline-block;
margin: 2px 0 -1px 0.5rem;
&.ffz--twitter-badge__verified {
background-position: 0 -15px;
}
&.ffz--twitter-badge__translator {
background-position: -12px -15px;
}
&.ffz--twitter-badge__protected {
background-position: -24px -15px;
width: 1.4rem;
}
}
.ffz--rich-gallery {
position: relative;
text-align: center;
max-height: 350px;
display: grid;
grid-column: 1/2;
grid-template-columns: 1fr 1fr;
column-gap: 4px;
border-radius: 4px;
overflow: hidden;
&[data-items="1"] {
display: flex;
justify-content: center;
.ffz--gallery-column {
width: 100%;
}
}
.ffz--gallery-column {
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: -4px;
max-height: calc(100% + 4px);
&:only-child {
grid-column-start: 1;
grid-column-end: 3;
img, video {
object-fit:contain;
}
.tw-aspect { img, video { object-fit: cover; } }
}
> * {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
margin-top: 4px;
}
&[data-items="2"] > * {
min-height: calc(50% - 2px);
}
&[data-items="1"] > * {
min-height: 100%;
}
img, video {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
.ffz-badge {
display: inline-block;

View file

@ -65,6 +65,9 @@
.ffz-i-comp-off:before { content: '\e83f'; } /* '' */
.ffz-i-viewers:before { content: '\e840'; } /* '' */
.ffz-i-chat:before { content: '\e841'; } /* '' */
.ffz-i-location:before { content: '\e842'; } /* '' */
.ffz-i-link:before { content: '\e843'; } /* '' */
.ffz-i-volume-off:before { content: '\e845'; } /* '' */
.ffz-i-move:before { content: '\f047'; } /* '' */
.ffz-i-link-ext:before { content: '\f08e'; } /* '' */
.ffz-i-twitter:before { content: '\f099'; } /* '' */

File diff suppressed because one or more lines are too long

View file

@ -65,6 +65,9 @@
.ffz-i-comp-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83f;&nbsp;'); }
.ffz-i-viewers { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe840;&nbsp;'); }
.ffz-i-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe841;&nbsp;'); }
.ffz-i-location { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe842;&nbsp;'); }
.ffz-i-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe843;&nbsp;'); }
.ffz-i-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe845;&nbsp;'); }
.ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf047;&nbsp;'); }
.ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
.ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }

View file

@ -76,6 +76,9 @@
.ffz-i-comp-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83f;&nbsp;'); }
.ffz-i-viewers { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe840;&nbsp;'); }
.ffz-i-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe841;&nbsp;'); }
.ffz-i-location { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe842;&nbsp;'); }
.ffz-i-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe843;&nbsp;'); }
.ffz-i-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe845;&nbsp;'); }
.ffz-i-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf047;&nbsp;'); }
.ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
.ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }

View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'ffz-fontello';
src: url('../font/ffz-fontello.eot?13031397');
src: url('../font/ffz-fontello.eot?13031397#iefix') format('embedded-opentype'),
url('../font/ffz-fontello.woff2?13031397') format('woff2'),
url('../font/ffz-fontello.woff?13031397') format('woff'),
url('../font/ffz-fontello.ttf?13031397') format('truetype'),
url('../font/ffz-fontello.svg?13031397#ffz-fontello') format('svg');
src: url('../font/ffz-fontello.eot?81632949');
src: url('../font/ffz-fontello.eot?81632949#iefix') format('embedded-opentype'),
url('../font/ffz-fontello.woff2?81632949') format('woff2'),
url('../font/ffz-fontello.woff?81632949') format('woff'),
url('../font/ffz-fontello.ttf?81632949') format('truetype'),
url('../font/ffz-fontello.svg?81632949#ffz-fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'ffz-fontello';
src: url('../font/ffz-fontello.svg?13031397#ffz-fontello') format('svg');
src: url('../font/ffz-fontello.svg?81632949#ffz-fontello') format('svg');
}
}
*/
@ -121,6 +121,9 @@
.ffz-i-comp-off:before { content: '\e83f'; } /* '' */
.ffz-i-viewers:before { content: '\e840'; } /* '' */
.ffz-i-chat:before { content: '\e841'; } /* '' */
.ffz-i-location:before { content: '\e842'; } /* '' */
.ffz-i-link:before { content: '\e843'; } /* '' */
.ffz-i-volume-off:before { content: '\e845'; } /* '' */
.ffz-i-move:before { content: '\f047'; } /* '' */
.ffz-i-link-ext:before { content: '\f08e'; } /* '' */
.ffz-i-twitter:before { content: '\f099'; } /* '' */

View file

@ -181,299 +181,24 @@ body {
text-align: left;
position: relative;
padding: 8px;
/*.stats:after, .heading:after {
content: '';
display: table;
clear: both;
}
.tweet-heading {
&:before {
content: '';
position: absolute;
top: 24px;
right: 24px;
width: 20px;
height: 16px;
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px;
}
.avatar {
border-radius: 50%;
}
}
.heading {
.title {
font-weight: bold;
display: block;
text-align: justify;
}
}
.display-name {
padding-top: 3px;
font-size: 14px;
display: block;
&.big-name {
font-size: 20px;
padding-top: 18px;
}
}
.quoted {
.display-name {
padding: 0 5px 0 0;
display: inline;
font-size: 12px;
}
}
.avatar {
float: left;
margin-right: 8px;
max-height: 48px;
max-width: 100px;
}*/
line-height: 1.2em;
}
.ffz--chat-card,
.ffz-rich-tip {
.body { line-height: 1.5em }
.ffz__tooltip {
--color-border-base: var(--color-text-tooltip);
.tweet-heading:before {
content: '';
position: absolute;
top: 24px;
right: 24px;
width: 20px;
height: 16px;
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px;
&:not([data-shift="true"]) .ffz--shift-show,
&[data-shift="true"] .ffz--shift-hide { display: none !important; }
.tw-c-text-base {
color: var(--color-text-tooltip) !important;
}
.stats:after, .heading:after {
content: '';
display: table;
clear: both;
.tw-c-text-alt {
color: var(--color-text-tooltip-alt) !important;
}
.avatar {
float: left;
margin-right: 8px;
max-height: 48px;
max-width: 100px;
}
.tweet-heading .avatar {
border-radius: 50%;
}
.heading .title {
font-weight: bold;
display: block;
text-align: justify;
}
.display-name {
padding-top: 3px;
font-size: 14px;
display: block;
&.big-name {
font-size: 20px;
padding-top: 18px;
}
}
.quoted .display-name {
padding: 0 5px 0 0;
display: inline;
font-size: 12px;
}
.twitch-heading {
.tip-badge.verified {
height: 12px;
width: 12px;
margin: 2px 0 -1px 5px;
background: url("https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/1");
background-size: contain;
display: inline-block;
}
.big-name .tip-badge.verified {
height: 18px;
width: 18px;
margin: 1px 0 0 10px;
}
}
.tweet-heading .tip-badge {
height: 12px;
width: 12px;
margin: 2px 0 -1px 5px;
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
display: inline-block;
}
.tip-badge {
&.verified {
background-position: 0 -15px;
}
&.translator {
background-position: -12px -15px;
}
&.protected {
background-position: -24px -15px;
width: 14px;
}
}
.emoji {
height: 1em;
vertical-align: middle;
}
.quoted > div:not(:first-child), > div:not(:first-child) {
margin-top: 8px;
}
.quote-heading + .body {
margin-top: 0 !important;
}
.replying {
+ .body {
margin-top: 0 !important;
}
opacity: 0.6;
font-size: 10px;
}
.subtitle, .quoted .body, .stats, .username {
opacity: 0.6;
}
.stats {
display: flex;
.wide-stat {
flex-grow: 1;
}
}
time {
flex-grow: 1;
}
.tweet-stats .stat:before {
.tw-root--theme-dark & {
filter: invert(100%);
}
content: '';
display: inline-block;
background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
margin: 0 5px 0 10px;
}
.stat {
&.likes:before {
width: 17px;
height: 14px;
margin-bottom: -3px;
}
&.retweets:before {
width: 20px;
height: 12px;
background-position: -34px 0;
margin-bottom: -2px;
}
}
.media {
position: relative;
text-align: center;
&[data-count]:not([data-count="1"]) {
display: flex;
margin: 8px -5px -5px 0;
flex-flow: column wrap;
height: 329px;
}
.duration {
position: absolute;
bottom: 0;
right: 0;
margin: 4px;
background: #000;
color: #fff;
opacity: .8;
padding: 2px 4px;
border-radius: 2px;
z-index: 10;
font-weight: 500;
}
}
.sixteen-nine {
width: 100%;
overflow: hidden;
margin: 0;
padding-top: 56.25%;
position: relative;
img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
}
.media {
video {
width: 100%;
max-height: 324px;
}
&[data-count="4"] {
flex-flow: row wrap;
}
&[data-count="2"] {
height: 164.5px;
}
img {
max-height: 324px;
}
}
.quoted .media {
&[data-count]:not([data-count="1"]), &[data-count="2"] {
height: 150px;
}
video, img {
max-height: 150px;
}
}
.media {
span {
background: no-repeat center center;
background-size: cover;
}
&[data-count="2"] span, &[data-count="3"] span, &[data-count="4"] span {
width: calc(50% - 5px);
height: calc(50% - 5px);
margin: 0 5px 5px 0;
}
&[data-count="2"] span, &[data-count="3"] span:first-of-type {
height: 100%;
}
}
.profile-stats {
display: flex;
flex-flow: row;
flex-wrap: wrap;
div {
flex-grow: 1;
font-size: 16px;
margin-right: 10px;
}
span {
display: block;
font-size: 12px;
opacity: 0.7;
}
}
.quoted {
border: 1px solid #474747;
border-radius: 5px;
padding: 8px;
}
.media[data-type="video"]:after {
position: absolute;
content: '';
width: 64px;
height: 64px;
top: calc(50% - 32px);
left: calc(50% - 32px);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z'/%3E%3C/svg%3E");
.tw-c-text-alt-2 {
color: var(--color-text-tooltip-alt-2) !important;
}
}