# Modifiers

## Description

Modifiers in OSL allow for dynamic adjustments to UI elements' properties such as color, position, and size. They provide a flexible way to customize the appearance and behavior of UI elements based on different conditions.

## Syntax

```javascript
command : modifier1 modifier2 modifier3
```

Modifiers are appended after a colon (`:`) following a command. Multiple modifiers can be chained together.

## Common Modifiers

### Color Modifiers

* `c#hexcode`: Sets the color of the element
* `hover_c#hexcode`: Sets the color when the element is hovered

Example:

```javascript
square 100 100 2 : c#ff0000 hover_c#00ff00
// Red square that turns green on hover
```

### Position Modifiers

* `chx#value`: Changes the X position by the specified amount
* `chy#value`: Changes the Y position by the specified amount

Example:

```javascript
text "Hello" 16 : chx#50 chy#-30
// Text shifted 50 pixels right and 30 pixels up
```

### Size Modifiers

* `hover_size#scale`: Adjusts the element's size on hover (1.0 is normal size)

Example:

```javascript
image "image.png" 120 : hover_size#1.2
// Image grows to 120% size on hover
```

## Combined Usage

Modifiers can be combined to create complex behaviors:

```javascript
// Square with multiple modifiers
square 50 50 1 : c#336699 chx#20 chy#-10 hover_c#ff9900 hover_size#1.1

// Interactive button with hover effects
button "Click me" : c#fff hover_c#00ff00 hover_size#1.1

// Image with position and hover effects
image "icon.png" 64 : chx#10 chy#10 hover_size#1.2 hover_c#ff0000
```

## Important Notes

* Modifiers are processed in order from left to right
* Color modifiers affect the entire element
* Position modifiers are relative to the original position
* Hover modifiers only take effect when the mouse is over the element
* Multiple modifiers of the same type will use the last one specified


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://osl.mistium.com/commands/modifiers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.