Using Stylesheets

If you want to specify a different location for the loaded Stylesheet, you can add this to your Panel class:

[StyleSheet("main.scss")]

You can also import a stylesheet from within another stylesheet like so:

@import "buttons.scss";

Styling Directly

There are a few ways to style your Panels without a stylesheet. It's really recommended that you use a stylesheet to keep things organized, but there are also valid reasons to use the following methods.

Styling the Element

You can directly style any element just like you can in HTML, but can inject C# when necessary:

<label style="color: red">DANGER!</label>
<div class="progress-bar">
  <div class="fill" style="width: @(Progress * 100f)%"></div>
</div>

Style Block

Before or after your <root> element, you can add a <style> block that is read just like a Stylesheet:

<style>
  MyPanel {
    width: 100%;
    height: 100%;
  }
  .hp { color: red; }
  .armor { color: blue; }
</style>

Styling in Code

You can a Panel's Style directly and modify the values however you'd like via Tick() or OnUpdate():

myPanel.Style.Width = Length.Percent(Progress * 100f);