UI Style Properties: CSS Reference with Custom Pseudo-Classes and Sound Events

s&box UI styling follows web CSS conventions with some differences. Everything is flex by default. Key custom properties include sound-in/sound-out for hover/click sounds, background-image-tint, and text-stroke.

Custom Pseudo-Classes

• :intro — removed when element is created, things transition away from this state
• :outro — added when Panel.Delete() is called, panel waits for transitions to finish before deleting

MyPanel {
    transition: all 2s ease-out;
    transform: scale( 1 );

    &:intro {
        transform: scale( 0 ); // Expand from nothing on create
    }

    &:outro {
        transform: scale( 2 ); // Double size before delete
    }
}

Key Differences from Web

• display only supports flex (default) and none
• position supports static, relative, absolute (no fixed)
• font-family uses the font's display name, not filename
• pointer-events defaults to none

Custom Properties

• sound-in / sound-out — play sounds on style apply/remove (great for :hover)
• background-image-tint — multiply background-image by a color
• text-stroke — outline text with width and color
• mask-scope: filter — blend between unfiltered and filtered using mask