1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-23 06:20:54 +00:00
FrankerFaceZ/styles/chat.scss
SirStendec 8cfbc95821 4.15.0
* Added: New appearance type for chat actions that includes both an icon and text.
* Changed: The emote menu now displays channel avatars rather than sub badges.
* Changed: Emotes unlocked via points or other methods will appear as unlocked on the Channel page of the emote menu, even if you aren't subscribed.
* Changed: Display the number of months someone has been subscribed on the Founder badge. (Closes #694)
* Removed: Setting to not automatically redirect to Squad Stream pages, as Twitch is no longer doing that.
* Fixed: The emote menu now correctly groups emotes with no specific source channel.
* Fixed: The emote menu should no longer display sets as `Set #Number`.
* Fixed: The emote data module constantly trying to load data for a set that does not exist rather than storing that it does not exist.
* Fixed: Cache emote set data from the emote menu for use with tool-tips.
* Fixed: Clicking buttons in the FFZ Control Center's header now prevents dragging from starting.
* Fixed: Remove several Fine instances that were not resolving to anything useful.
* Fixed: Alignment of in-line mod actions.
* Behind the Scenes: Started fresh work on custom viewer cards.
2019-10-28 01:06:02 -04:00

150 lines
No EOL
2.7 KiB
SCSS

.ffz-cheer {
display: inline-block;
height: 2.8rem;
line-height: 2.8rem;
padding-left: 3rem;
margin: -.5rem .5rem;
background-position: 0;
background-repeat: no-repeat;
&:after {
font-weight: bold;
content: attr(data-amount)
}
}
.ffz-cheer-preview {
height: 11.2rem;
width: 11.2rem;
}
.ffz--inline-reasons {
max-width: 30rem;
}
.ffz--inline-actions {
vertical-align: middle;
}
.ffz-badge {
display: inline-block;
min-width: 1.8rem;
height: 1.8rem;
margin: 0 .3rem .2rem 0;
background-position: center;
vertical-align: middle;
&.ffz-no-invert {
filter:none !important;
}
&.ffz-full-size {
min-width: 1.8rem;
height: 1.8rem;
margin: 0 .3rem .2rem 0;
border-radius: 0;
}
}
.ffz__tooltip .ffz-i-lock {
position: absolute;
bottom: 0; right: 0;
border-radius: .2rem;
font-size: 1rem;
background-color: rgba(0,0,0,0.5);
color: #fff;
}
.chat-line__message {
position: relative;
}
.ffz--modifier-actions {
position: absolute;
top: 0;
left: 0;
padding: .5rem 0;
z-index: 1;
background: rgba(255,255,255,0.5);
.dark-theme &,
.tw-root--theme-dark & {
background: rgba(0,0,0,0.5);
}
.ffz-mod-icon {
margin: 0 .5rem;
display: none;
}
}
.ffz--keys {
&[data-ctrl="true"] .ffz-modifier-1,
&[data-shift="true"] .ffz-modifier-2,
&[data-shift="true"][data-ctrl="true"] .ffz-modifier-3,
&[data-alt="true"] .ffz-modifier-4,
&[data-alt="true"][data-ctrl="true"] .ffz-modifier-5,
&[data-alt="true"][data-shift="true"] .ffz-modifier-6,
&[data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-7,
&[data-meta="true"] .ffz-modifier-8,
&[data-meta="true"][data-ctrl="true"] .ffz-modifier-9,
&[data-meta="true"][data-shift="true"] .ffz-modifier-10,
&[data-meta="true"][data-shift="true"][data-ctrl="true"] .ffz-modifier-11,
&[data-meta="true"][data-alt="true"] .ffz-modifier-12,
&[data-meta="true"][data-alt="true"][data-ctrl="true"] .ffz-modifier-13,
&[data-meta="true"][data-alt="true"][data-shift="true"] .ffz-modifier-14,
&[data-meta="true"][data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-15 {
display: inline-flex;
}
}
.ffz--modifier-actions:empty {
display: none;
}
.ffz--favorite {
position: absolute;
bottom: 0; right: 0;
font-size: 1rem;
border-radius: .5rem;
color: gold;
background-color: rgba(0,0,0,0.5);
.ffz__tooltip & {
bottom: .1rem; right: .1rem;
padding: .2rem 0;
}
}
.modified-emote {
~ .chat-line__message--emote {
position: relative;
z-index: 1
}
position: relative;
z-index: 0;
span {
position: absolute;
top: -20px; bottom: -20px; left: -20px; right: -20px;
margin: auto;
pointer-events: none;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}