Styling

Every image is output to the page with this basic markup:

<img src="..." data-lilypond-image />

See the styling reference for a full list of available selectors.

Global styles

Target [data-lilypond-image] in any global stylesheet to modify global styles for the rendered images. For example, backgrounds are transparent by default, so you may want to apply a custom background-color if your site uses dark mode:

my-site.css

[data-lilypond-image] {
  background-color: white;
}

Scoped styles

The <LilyPond> component allows you to pass a class. The class is scoped to that specific component instance.

---
import LilyPond from "astro-lilypond/component";
import rainbowRoad from "./scores/rainbow-road.ly?crop";
---

<LilyPond content={rainbowRoad} class="styled" />

<style>
  @keyframes rainbow {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
  }

  .styled {
    animation: rainbow 3s infinite;
    background-color: peachPuff;
    padding: 6px;
  }
</style>

Multi-page groups

When crop is false, long scores will output multiple pages. These pages render inside of an <ol> ordered list, and each <img> image is within a <li> list item.

<ol data-lilypond-group>
  <li>
    <img data-lilypond-image src="page1.svg" />
  </li>
  <li>
    <img data-lilypond-image src="page2.svg" />
  </li>
</ol>

Basic styles

astro-lilypond doesn’t ship any styles of its own, so you may see bullets, padding, and margin around your multi-page groups. To prevent this, you can apply a reset to any global stylesheet:

reset.css

[data-lilypond-group] {
  list-style-type: none;
  padding: 0;
  margin: 0;

  li {
    margin: 0;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

Side-scrolling group

If you’d like to display multi-page scores in a horizontally-scrolling group like this…

1. 
2. 

…here’s a good baseline to start from:

custom.css

[data-lilypond-group] {
  display: flex;
  gap: 1rem;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style-type: none;

  li {
    flex-shrink: 0;
    max-width: 80vw;
    margin: 0;
  }

  img {
    width: 100%;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}