mod.css

/* Matcha introduction */
body {
  background-image: url("/mod.svg");
  background-repeat: no-repeat;
}

.matcha {
  margin: 4rem auto 4rem;
}

.matcha .logo {
  max-width: 300px;
}

.matcha hgroup {
  border: none;
  text-align: center;
}

.matcha hgroup h1 {
  font-size: 3rem;
  border: none;
}

.matcha hgroup h1 a:hover::before {
  content: "\1F375";
}

.matcha ul.features {
  padding: 0;
  list-style: none;
}

.matcha .usage-snippet {
  cursor: pointer;
  user-select: all;
  transition: background var(--tr-duration);
}

.matcha .usage-snippet:hover {
  background: var(--bg-subtle);
}

/* Matcha menu */
aside nav ul ul ul li :is(a, [class^="hljs-"], var) {
  color: var(--muted) !important;
}

:is(section) > :is(h1, h2, h3, h4, h5, h6)[id]::before, .hx[id]::before, #matcha::before {
  content: "";
  display: block;
  height: calc(1rem + var(--ly-header-size));
  margin-top: calc(-1 * (1rem + var(--ly-header-size)));
  visibility: hidden;
  pointer-events: none;
}

/* Matcha header and footer */
body > header svg,
body > footer svg {
  fill: var(--ly-brand);
  transition: fill var(--tr-duration);
}

body > header li:hover svg,
body > footer li:hover svg {
  fill: var(--accent);
}

body > header svg.sponsor,
body > footer svg.sponsor {
  fill: var(--variant);
}

body > header svg.light, body > header svg.dark {
  display: none;
}

/* Matcha build */
details summary a {
  pointer-events: none;
}

.matcha-build .variables input[name$="opacity"] {
  margin-left: 0.25rem;
  width: 3rem;
  text-align: center;
}

.matcha-build .variables td code:only-child {
  white-space: nowrap;
}

.matcha-build .variables input[type="color"] {
  width: 3rem;
}

.matcha-build .styling {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.matcha-build .styling label code {
  white-space: nowrap;
}

.matcha-build .styling label small {
  opacity: 0.75;
}

.matcha-build .styling > div {
  flex: 1 1 0;
}

.matcha-build .extra label small, .matcha-build .miscellaneous label small {
  margin-left: 1.75rem;
  display: block;
}

.matcha-build table td code {
  word-break: keep-all;
}

.matcha-preview {
  background: var(--bg-subtle);
}

/* CSS compatibility */
.css-compatibility-table th, .css-compatibility-table td {
  vertical-align: baseline;
  text-align: left;
  min-width: 10rem;
}
.css-compatibility-table :is(td, th) :nth-child(1) {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
}

.css-compatibility-table th:has([data-perfect]:first-child) {
  background: var(--bg-success);
  border-color: var(--success);
}

.css-compatibility-table th:has([data-good]:first-child) {
  background: var(--bg-success);
  border-color: var(--success);
}

.css-compatibility-table th:has([data-ok]:first-child) {
  background: var(--bg-attention);
  border-color: var(--attention);
}

.css-compatibility-table th:has([data-bad]:first-child) {
  background: var(--bg-danger);
  border-color: var(--danger);
}

.css-compatibility-table th:has([data-unknown]:first-child) {
  background: var(--bg-muted);
  border-color: var(--bd-muted);
}

.css-compatibility-table :is(td, th) > :nth-child(n+2) {
  display: none;
  white-space: nowrap;
  font-size: 85%;
  font-weight: normal;
  list-style: circle;
  margin: 0 0.5rem;
}

.css-compatibility-table.details :is(td, th) > :nth-child(1) {
  border-bottom: 1px solid var(--bg-contrast);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.css-compatibility-table.details :is(td, th) > :nth-child(n+2) {
  display: list-item;
}

.css-compatibility-table.details :is(td, th) > br:nth-child(n+2) {
  display: none;
}

.css-compatibility-table [data-version] {
  font-size: 85%;
  font-weight: normal;
}

.css-compatibility-table [data-empty] {
  background: black;
  border-color: black;
}

.css-compatibility-table [data-unknown] {
  color: var(--muted);
}

.css-compatibility-table [data-prefix] {
  color: var(--active);
}

.css-compatibility-table [data-perfect] {
  color: var(--success);
  text-decoration: underline;
}

.css-compatibility-table [data-good] {
  color: var(--success);
}

.css-compatibility-table [data-ok] {
  color: var(--attention);
}

.css-compatibility-table [data-bad] {
  color: var(--danger);
}

.css-compatibility-legend {
  display: none;
}

.css-compatibility-legend.details {
  display: block;
  margin-top: 1rem;
}

/* Extras */
#extras {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* Examples */
.example {
  padding: 1rem;
  border: 1px solid var(--bd-muted);
  border-radius: var(--bd-radius);
  box-sizing: border-box;
  transition: all var(--tr-duration);
}

.example:not([data-codeless]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.example + details {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 1rem;
}

.example > :first-child {
  margin-top: 0;
}

.example > :last-child {
  margin-bottom: 0;
}

.example .note {
  color: var(--muted);
  font-size: 85%;
  font-style: italic;
  margin-top: 1rem;
  display: block;
  text-align: left;
}

/** Example tabs */
.example-tabs {
  align-items: end;
  justify-content: end;
  margin-bottom: 0;
  border-bottom: none;
  margin: 0.5rem 0 0.25rem;
}

.example-tabs > li {
  margin: 0;
}

.example-tabs > li:hover {
  background: var(--bg-accent);
  color: var(--accent);
}

.example-tabs svg {
  display: none;
  fill: currentColor;
}

/* Additional example styles */
.example.example-border :is(section, header, footer, aside) {
  border: 2px dotted var(--bg-subtle);
  border-radius: var(--bd-radius);
}

.example.example-border aside {
  border-left: 4px solid var(--bd-muted);
  max-width: 33%;
}

.example :is(header, footer, aside) .note, .example > .note:first-child {
  text-align: center;
  margin-top: 0;
}

.example.example-flex {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 300px) {
  .example article {
    min-width: 100px;
  }
}

@media (min-width: 600px) {
  .example article {
    min-width: 200px;
  }
}

.example article.layout {
  flex: 1 1 0;
  width: fit-content;
}

.example article.layout header {
  text-align: center;
}

.example > :is(img, video) {
  max-height: 400px;
  display: block;
}

.example dialog {
  position: relative;
}

.example form fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.example table th[rowspan="4"] div {
  transform: rotate(-90deg) translateX(-300%);
  width: 1rem;
  white-space: nowrap;
}

.example input[type="image"] {
  height: 1.5em;
  width: 1.5em;
}

.example input:is([type="datetime-local"], [type="date"], [type="month"], [type="week"], [type="time"]) {
  max-width: 100px;
}

@media (min-width: 640px) {
  .example input:is([type="datetime-local"], [type="date"], [type="month"], [type="week"], [type="time"]) {
    max-width: none;
  }
}

.example menu {
  z-index: 200;
}

.example .example-shadow-root {
  border: 2px dotted var(--bg-contrast);
  border-radius: var(--bd-radius);
}

/* Layout structure */
.layout-structure, .layout-structure ul {
  padding-left: 1rem;
  list-style: none;
}

/* Easter egg */
.easter-egg {
  width: 100%;
}

.easter-egg::backdrop {
  background: transparent;
}

.easter-egg.glitch {
  position: fixed;
  z-index: 250;
}

.easter-egg.glitch.background {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 0, 0, 0.2);
  backdrop-filter: brightness(50%) blur(5px);
}

.easter-egg.glitch.blue {
  background: #00ebe5;
}

.easter-egg.glitch.red {
  background: #e80d48;
}

.easter-egg.glitch.blue, .easter-egg.glitch.red {
  opacity: 0.1;
  animation: 1s glitch infinite;
}

@keyframes glitch {
  1% {
    transform: rotateX(10deg) skewX(90deg);
  }
  2% {
    transform: rotateX(0deg) skewX(0deg);
  }
}