fonts.google.com - Show Cap- and Ex- Heights by myfonj

/* ==UserStyle==
@name           fonts.google.com - Show Cap- and Ex- Heights
@namespace      github.com/openstyles/stylus
@version        2.1.0
@description    Simple utility that might help reveal potental problems with font metrics.
@author         myf
==/UserStyle== */

@-moz-document domain("fonts.google.com") {
/*
Chengelog
2.1.0 (2024-10-08) Now applied to variant listing as well.
*/
 .variant__font-render div,
 .tile__text {
  --ex: color-mix(in srgb, highlight 40%, transparent);
  --ascend: color-mix(in srgb, mark  30%, transparent);
  line-height: 1cap !important;
  background-image: linear-gradient(
   to top,
   var(--ex)   0 1ex,
   var(--ascend) 1ex 1cap,
   red       1cap
  ) !important;
  /*
  none of these is really necessary:
  */
  background-size: 100% 1cap !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
 }
 /* */
}