Emojipedia: large emoji in different fonts by myfonj

/* ==UserStyle==
@name           Emojipedia large emoji in different fonts and condensed history
@namespace      myfonj
@author         myfonj
@author         X1011_
@description    Enlarges emoji characters for better visibility and uses different fonts according mouse cursor. Intended for Firefox 115+ on Windows.
@version        2.0.0
@license        CC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlike
==/UserStyle== */
@-moz-document domain("emojipedia.org") {
/*
https://userstyles.world/style/10592

Changelog
2.0.0 (2024-11-29) Adopted new structure, simplified history designs.
1.2.0 (2024-06-13) Some cleanup.
1.0.0 (2023-06-26) Init.

Features
- 80px "main" ("Meaning") emoji (just like images of designs).
  - In "monochrome" variant (if available) while unhovered (where supported).
  - In "colourful" system emoji font (default) (where supported).
  - In "twitter" while LMB pressed (where supported).

Credits / Attribution:
Originally started from https://userstyles.org/styles/106270/emojipedia-large-emoji by X1011_

*/
main [class*="Emoji_emoji"],
.emoji {
 /*
 Larger even larger
 */
 &[class*="Emoji_emoji-large"] {
  font-size: 80px !important;
  line-height: 80px;
  min-width: 80px;
  height: 100px;
  display: inline-block;
 }
 /*
 Segoe UI stack
 */
 font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 /*
 Lighter background in dark mode for visible outlines
 */
 @media (prefers-color-scheme: dark) {
  & {
   background-color: #333;
  }
 }
 /*
 Twemoji when body:active
 */
 body:active:not(:has(:any-link:active)) & {
  font-family: "twemoji mozilla" !important;
  @media (prefers-color-scheme: dark) {
   & {
    background-color: #666;
   }
  }
 }
 /*
 Monochrome when cursour outside viewport
 no support for `font-variant-emoji`, so we rely on vs15 on ::after
 that works only in some places. Luckily still works on main "Meaning".
 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji
 */
 body:not(:hover) & {
  font-family: "Segoe UI Symbol" !important;
  font-variant-emoji: text !important;
  &::after {
   content: '\00FE0E' !important;
  }
 }
}
/*
 Some cleaning and compressing
*/
*:has(>form[class*="Search_search"]) {
 & > *:not(form) {
  display: none !important;
 }
 margin: 0 !important;
 position: static !important;
}
*[class*="SideSection_side-section"] {
 display: none; 
}
main > [class^="Container"] {
 max-width: none !important;
}
*[class*="Tabs_tabs"] {
 position: static !important;
}
h3.text-left:has(+ div.text-left),
h3.text-left:has(+ div.text-left) + div.text-left,
h3.text-left:has(+ div.text-left) + div.text-left * {
 display: inline !important;
}

/*
Designs
- ditch the horizontall scroll
- let it wrap
- put newest first
For "newest first" we are doing wrapped row-reverse,
but to get the second dow up, we are fotating container
and then items inside back. It produces shorter first
(recent) line, but whatever.
*/
*[class^="EmojiTimeline_emoji-timeline__"] {
 display: block;
 height: auto;
}
*[class^="EmojiTimeline_emoji-timeline-pins__"] {
 display: block;
 padding: 0;
}
*[class^="EmojiTimeline_emoji-timeline-arrow__"] {
 display: none;
}
*[class^="EmojiTimeline_emoji-timeline-pins-list__"] {
 width: auto;
 gap: 0;
 flex-direction: row-reverse;
 justify-content: flex-end;
 transform: rotatex(180deg);
 flex-wrap: wrap;
 & > [class*="calc"]:empty {
  display: none;
 }
}
*[class^="EmojiTimeline_emoji-timeline-pin__"] {
 transform: rotatex(180deg) !important;
 margin: none !important;
 width: auto;
}
*[class*="EmojiTimeline_emoji-timeline-pin-active__"] {
 transform: none;
 background: transparent;
}

/*
 Different background for shots
*/
.vendor-image img:hover {
 background-color: #999;
}

}