mirrors/maomaowm
1
0
Fork 0
mirror of https://github.com/DreamMaoMao/maomaowm.git synced 2026-03-14 05:34:21 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: add docs and sync with wiki & website

Browse source
This commit is contained in:
atheeq-rhxn 2026-03-12 10:31:29 +05:30
parent 1fc89d01eb
commit 5906d9621e
28 changed files with 2594 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

108
docs/visuals/animations.md Normal file
View file

@ -0,0 +1,108 @@
---
title: Animations
description: Configure smooth transitions for windows and layers.
---
## Enabling Animations
mangowm supports animations for both standard windows and layer shell surfaces (like bars and notifications).
```ini
animations=1
layer_animations=1
```
## Animation Types
You can define different animation styles for opening and closing windows and layer surfaces.
Available types: `slide`, `zoom`, `fade`, `none`.
```ini
animation_type_open=zoom
animation_type_close=slide
layer_animation_type_open=slide
layer_animation_type_close=slide
```
## Fade Settings
Control the fade-in and fade-out effects for animations.
```ini
animation_fade_in=1
animation_fade_out=1
fadein_begin_opacity=0.5
fadeout_begin_opacity=0.5
```
- `animation_fade_in` — Enable fade-in effect (0: disable, 1: enable)
- `animation_fade_out` — Enable fade-out effect (0: disable, 1: enable)
- `fadein_begin_opacity` — Starting opacity for fade-in animations (0.0–1.0)
- `fadeout_begin_opacity` — Starting opacity for fade-out animations (0.0–1.0)
## Zoom Settings
Adjust the zoom ratios for zoom animations.
```ini
zoom_initial_ratio=0.3
zoom_end_ratio=0.8
```
- `zoom_initial_ratio` — Initial zoom ratio
- `zoom_end_ratio` — End zoom ratio
## Durations
Control the speed of animations (in milliseconds).
| Setting | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `animation_duration_move` | integer | `500` | Move animation duration (ms) |
| `animation_duration_open` | integer | `400` | Open animation duration (ms) |
| `animation_duration_tag` | integer | `300` | Tag animation duration (ms) |
| `animation_duration_close` | integer | `300` | Close animation duration (ms) |
| `animation_duration_focus` | integer | `0` | Focus change (opacity transition) animation duration (ms) |
```ini
animation_duration_move=500
animation_duration_open=400
animation_duration_tag=300
animation_duration_close=300
animation_duration_focus=0
```
## Custom Bezier Curves
Bezier curves determine the "feel" of an animation (e.g., linear vs. bouncy). The format is `x1,y1,x2,y2`.
You can visualize and generate curve values using online tools like [cssportal.com](https://www.cssportal.com/css-cubic-bezier-generator/) or [easings.net](https://easings.net).
| Setting | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `animation_curve_open` | string | `0.46,1.0,0.29,0.99` | Open animation bezier curve |
| `animation_curve_move` | string | `0.46,1.0,0.29,0.99` | Move animation bezier curve |
| `animation_curve_tag` | string | `0.46,1.0,0.29,0.99` | Tag animation bezier curve |
| `animation_curve_close` | string | `0.46,1.0,0.29,0.99` | Close animation bezier curve |
| `animation_curve_focus` | string | `0.46,1.0,0.29,0.99` | Focus change (opacity transition) animation bezier curve |
| `animation_curve_opafadein` | string | `0.46,1.0,0.29,0.99` | Open opacity animation bezier curve |
| `animation_curve_opafadeout` | string | `0.5,0.5,0.5,0.5` | Close opacity animation bezier curve |
```ini
animation_curve_open=0.46,1.0,0.29,0.99
animation_curve_move=0.46,1.0,0.29,0.99
animation_curve_tag=0.46,1.0,0.29,0.99
animation_curve_close=0.46,1.0,0.29,0.99
animation_curve_focus=0.46,1.0,0.29,0.99
animation_curve_opafadein=0.46,1.0,0.29,0.99
animation_curve_opafadeout=0.5,0.5,0.5,0.5
```
## Tag Animation Direction
Control the direction of tag switch animations.
| Setting | Default | Description |
| :--- | :--- | :--- |
| `tag_animation_direction` | `1` | Tag animation direction (1: horizontal, 0: vertical) |

82
docs/visuals/effects.md Normal file
View file

@ -0,0 +1,82 @@
---
title: Window Effects
description: Add visual polish with blur, shadows, and opacity.
---
## Blur
Blur creates a frosted glass effect for transparent windows.
| Setting | Default | Description |
| :--- | :--- | :--- |
| `blur` | `0` | Enable blur for windows. |
| `blur_layer` | `0` | Enable blur for layer surfaces (like bars/docks). |
| `blur_optimized` | `1` | Caches the wallpaper and blur background, significantly reducing GPU usage. Disabling it will significantly increase GPU consumption and may cause rendering lag. **Highly recommended.** |
| `blur_params_radius` | `5` | The strength (radius) of the blur. |
| `blur_params_num_passes` | `1` | Number of passes. Higher = smoother but more expensive. |
| `blur_params_noise` | `0.02` | Blur noise level. |
| `blur_params_brightness` | `0.9` | Blur brightness adjustment. |
| `blur_params_contrast` | `0.9` | Blur contrast adjustment. |
| `blur_params_saturation` | `1.2` | Blur saturation adjustment. |
> **Warning:** Blur has a relatively high impact on performance. If your hardware is limited, it is not recommended to enable it. If you experience lag with blur on, ensure `blur_optimized=1` — disabling it will significantly increase GPU consumption and may cause rendering lag. To disable blur entirely, set `blur=0`.
---
## Shadows
Drop shadows help distinguish floating windows from the background.
| Setting | Default | Description |
| :--- | :--- | :--- |
| `shadows` | `0` | Enable shadows. |
| `layer_shadows` | `0` | Enable shadows for layer surfaces. |
| `shadow_only_floating` | `1` | Only draw shadows for floating windows (saves performance). |
| `shadows_size` | `10` | Size of the shadow. |
| `shadows_blur` | `15` | Shadow blur amount. |
| `shadows_position_x` | `0` | Shadow X offset. |
| `shadows_position_y` | `0` | Shadow Y offset. |
| `shadowscolor` | `0x000000ff` | Color of the shadow. |
```ini
# Example shadows configuration
shadows=1
layer_shadows=1
shadow_only_floating=1
shadows_size=12
shadows_blur=15
shadows_position_x=0
shadows_position_y=0
shadowscolor=0x000000ff
```
---
## Opacity & Corner Radius
Control the transparency and roundness of your windows.
| Setting | Default | Description |
| :--- | :--- | :--- |
| `border_radius` | `0` | Window corner radius in pixels. |
| `border_radius_location_default` | `0` | Corner radius location: `0` (all), `1` (top-left), `2` (top-right), `3` (bottom-left), `4` (bottom-right), `5` (closest corner). |
| `no_radius_when_single` | `0` | Disable radius if only one window is visible. |
| `focused_opacity` | `1.0` | Opacity for the active window (0.0 - 1.0). |
| `unfocused_opacity` | `1.0` | Opacity for inactive windows (0.0 - 1.0). |
```ini
# Window corner radius in pixels
border_radius=0
# Corner radius location (0=all, 1=top-left, 2=top-right, 3=bottom-left, 4=bottom-right)
border_radius_location_default=0
# Disable radius if only one window is visible
no_radius_when_single=0
# Opacity for the active window (0.0 - 1.0)
focused_opacity=1.0
# Opacity for inactive windows
unfocused_opacity=1.0
```

4
docs/visuals/meta.json Normal file
View file

@ -0,0 +1,4 @@
{
"title": "Visuals",
"pages": ["theming", "status-bar", "effects", "animations"]
}

141
docs/visuals/status-bar.md Normal file
View file

@ -0,0 +1,141 @@
---
title: Status Bar
description: Configure Waybar for mangowm.
---
## Module Configuration
mangowm is compatible with Waybar's `ext/workspaces` module (Wayland standard) or the `dwl/tags` module. We recommend `ext/workspaces` for the best experience.
> **Tip:** You can also use the `dwl/tags` module, but `ext/workspaces` provides better integration with mangowm's features. The `ext/workspaces` module requires **Waybar > 0.14.0**.
### `config.jsonc`
Add the following to your Waybar configuration:
```jsonc
{
"modules-left": [
"ext/workspaces",
"dwl/window"
],
"ext/workspaces": {
"format": "{icon}",
"ignore-hidden": true,
"on-click": "activate",
"on-click-right": "deactivate",
"sort-by-id": true
},
"dwl/window": {
"format": "[{layout}] {title}"
}
}
```
## Styling
You can style the tags using standard CSS in `style.css`.
### `style.css`
```css
#workspaces {
border-radius: 4px;
border-width: 2px;
border-style: solid;
border-color: #c9b890;
margin-left: 4px;
padding-left: 10px;
padding-right: 6px;
background: rgba(40, 40, 40, 0.76);
}
#workspaces button {
border: none;
background: none;
box-shadow: inherit;
text-shadow: inherit;
color: #ddca9e;
padding: 1px;
padding-left: 1px;
padding-right: 1px;
margin-right: 2px;
margin-left: 2px;
}
#workspaces button.hidden {
color: #9e906f;
background-color: transparent;
}
#workspaces button.visible {
color: #ddca9e;
}
#workspaces button:hover {
color: #d79921;
}
#workspaces button.active {
background-color: #ddca9e;
color: #282828;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 1px;
padding-bottom: 0px;
border-radius: 3px;
}
#workspaces button.urgent {
background-color: #ef5e5e;
color: #282828;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 1px;
padding-bottom: 0px;
border-radius: 3px;
}
#tags {
background-color: transparent;
}
#tags button {
background-color: #fff;
color: #a585cd;
}
#tags button:not(.occupied):not(.focused) {
font-size: 0;
min-width: 0;
min-height: 0;
margin: -17px;
padding: 0;
color: transparent;
background-color: transparent;
}
#tags button.occupied {
background-color: #fff;
color: #cdc885;
}
#tags button.focused {
background-color: rgb(186, 142, 213);
color: #fff;
}
#tags button.urgent {
background: rgb(171, 101, 101);
color: #fff;
}
#window {
background-color: rgb(237, 196, 147);
color: rgb(63, 37, 5);
}
```
## Complete Configuration Example
> **Tip:** You can find a complete Waybar configuration for mangowm at [waybar-config](https://github.com/DreamMaoMao/waybar-config).

59
docs/visuals/theming.md Normal file
View file

@ -0,0 +1,59 @@
---
title: Theming
description: Customize the visual appearance of borders, colors, and the cursor.
---
## Dimensions
Control the sizing of window borders and gaps.
| Setting | Default | Description |
| :--- | :--- | :--- |
| `borderpx` | `4` | Border width in pixels. |
| `gappih` | `5` | Horizontal inner gap (between windows). |
| `gappiv` | `5` | Vertical inner gap. |
| `gappoh` | `10` | Horizontal outer gap (between windows and screen edges). |
| `gappov` | `10` | Vertical outer gap. |
## Colors
Colors are defined in `0xRRGGBBAA` hex format.
```ini
# Background color of the root window
rootcolor=0x323232ff
# Inactive window border
bordercolor=0x444444ff
# Active window border
focuscolor=0xc66b25ff
# Urgent window border (alerts)
urgentcolor=0xad401fff
```
### State-Specific Colors
You can also color-code windows based on their state:
| State | Config Key | Default Color |
| :--- | :--- | :--- |
| Maximized | `maximizescreencolor` | `0x89aa61ff` |
| Scratchpad | `scratchpadcolor` | `0x516c93ff` |
| Global | `globalcolor` | `0xb153a7ff` |
| Overlay | `overlaycolor` | `0x14a57cff` |
> **Tip:** For scratchpad window sizing, see [Scratchpad](/docs/window-management/scratchpad) configuration.
## Cursor Theme
Set the size and theme of your mouse cursor.
```ini
cursor_size=24
cursor_theme=Adwaita
```
> **Tip:** You may also want to set the `XCURSOR_SIZE` environment variable to match:
> `env=XCURSOR_SIZE,24`