# RaxolWeb Assets

This directory contains standalone CSS assets for RaxolWeb that can be distributed with the library.

## Files

### `raxol_web.css`

Standalone, self-contained CSS for rendering terminal UIs in web browsers with character-perfect monospace grid alignment.

**Features:**
- Core terminal grid system with 1ch-precise alignment
- CRT mode effects (scanlines, phosphor glow, vignette)
- High contrast mode for accessibility
- Reduced motion support
- Print styles
- Responsive design
- Performance optimizations

**Usage:**

If you're using the `RaxolWeb.LiveView.TerminalComponent`, the necessary CSS is already injected automatically in the component's render function. You don't need to include this file separately.

For custom implementations or standalone usage:

```html
<link rel="stylesheet" href="/path/to/raxol_web.css">
```

Or in your Phoenix app:

```elixir
# config/config.exs
config :my_app, MyAppWeb.Endpoint,
  # ... other config
  live_view: [
    signing_salt: "..."
  ],
  static_url: [scheme: "https", host: "example.com"],
  static_paths: ~w(css fonts images raxol_web.css)
```

**CSS Classes:**

- `.raxol-terminal-wrapper` - Outermost container (required)
- `.raxol-terminal` - Terminal content container (required)
- `.raxol-line` - Single line of terminal output (required)
- `.raxol-cell` - Individual character cell (required)
- `.raxol-bold` - Bold text style
- `.raxol-italic` - Italic text style
- `.raxol-underline` - Underlined text
- `.raxol-reverse` - Reverse video
- `.raxol-cursor` - Cursor with blink animation
- `.raxol-crt-mode` - Enable CRT effects (modifier on wrapper)
- `.raxol-high-contrast` - Enable high contrast mode (modifier on wrapper)
- `.raxol-sr-only` - Screen reader only (visually hidden)

**Customization:**

The CSS uses standard color values that can be overridden by theme CSS generated by `RaxolWeb.Themes.to_css/2`. Theme CSS should be included after this base CSS.

**Browser Support:**

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

**Performance:**

The CSS includes GPU acceleration hints and optimizations for smooth 60fps rendering. CRT effects use pseudo-elements to avoid extra DOM nodes.

## Theme CSS

Theme CSS is generated programmatically by the `RaxolWeb.Themes` module and does not need to be included as a separate file. See the module documentation for details.

## Font Requirements

RaxolWeb expects a monospace font family. The default stack is:

```css
font-family: 'Monaspace Argon', 'JetBrains Mono', 'Fira Code',
             'Cascadia Code', 'Consolas', monospace;
```

Any modern monospace font will work. The critical requirement is that characters are exactly 1ch wide for grid alignment.

For best results, use Monaspace Argon:
- https://monaspace.githubnext.com/

## License

MIT License - Same as RaxolWeb
