├── .wezterm.lua
├── README.md
├── config.yaml
├── private-build-plans.toml
├── vanilla-clear
    ├── styles.css
    ├── vanilla-clear.html
    └── vanilla-clear.zebar.json
└── zebar-config.yaml


/.wezterm.lua:
--------------------------------------------------------------------------------
  1 | -- Pull in the wezterm API
  2 | local wezterm = require("wezterm")
  3 | local act = wezterm.action
  4 | -- local mux = wezterm.mux
  5 | -- This will hold the configuration.
  6 | local config = wezterm.config_builder()
  7 | -- local gpus = wezterm.gui.enumerate_gpus()
  8 | -- config.webgpu_preferred_adapter = gpus[1]
  9 | -- config.front_end = "WebGpu"
 10 | 
 11 | config.front_end = "OpenGL"
 12 | config.max_fps = 144
 13 | config.default_cursor_style = "BlinkingBlock"
 14 | config.animation_fps = 1
 15 | config.cursor_blink_rate = 500
 16 | config.term = "xterm-256color" -- Set the terminal type
 17 | 
 18 | config.font = wezterm.font("Iosevka Custom")
 19 | -- config.font = wezterm.font("Monocraft Nerd Font")
 20 | -- config.font = wezterm.font("FiraCode Nerd Font Mono")
 21 | -- config.font = wezterm.font("JetBrains Mono Regular")
 22 | config.cell_width = 0.9
 23 | -- config.font = wezterm.font("Menlo Regular")
 24 | -- config.font = wezterm.font("Hasklig")
 25 | -- config.font = wezterm.font("Monoid Retina")
 26 | -- config.font = wezterm.font("InputMonoNarrow")
 27 | -- config.font = wezterm.font("mononoki Regular")
 28 | -- config.font = wezterm.font("Iosevka")
 29 | -- config.font = wezterm.font("M+ 1m")
 30 | -- config.font = wezterm.font("Hack Regular")
 31 | -- config.cell_width = 0.9
 32 | config.window_background_opacity = 0.9
 33 | config.prefer_egl = true
 34 | config.font_size = 18.0
 35 | 
 36 | config.window_padding = {
 37 | 	left = 0,
 38 | 	right = 0,
 39 | 	top = 0,
 40 | 	bottom = 0,
 41 | }
 42 | 
 43 | -- tabs
 44 | config.hide_tab_bar_if_only_one_tab = true
 45 | config.use_fancy_tab_bar = false
 46 | -- config.tab_bar_at_bottom = true
 47 | 
 48 | -- config.inactive_pane_hsb = {
 49 | -- 	saturation = 0.0,
 50 | -- 	brightness = 1.0,
 51 | -- }
 52 | 
 53 | -- This is where you actually apply your config choices
 54 | --
 55 | 
 56 | -- color scheme toggling
 57 | wezterm.on("toggle-colorscheme", function(window, pane)
 58 | 	local overrides = window:get_config_overrides() or {}
 59 | 	if overrides.color_scheme == "Zenburn" then
 60 | 		overrides.color_scheme = "Cloud (terminal.sexy)"
 61 | 	else
 62 | 		overrides.color_scheme = "Zenburn"
 63 | 	end
 64 | 	window:set_config_overrides(overrides)
 65 | end)
 66 | 
 67 | -- keymaps
 68 | config.keys = {
 69 | 	{
 70 | 		key = "E",
 71 | 		mods = "CTRL|SHIFT|ALT",
 72 | 		action = wezterm.action.EmitEvent("toggle-colorscheme"),
 73 | 	},
 74 | 	{
 75 | 		key = "h",
 76 | 		mods = "CTRL|SHIFT|ALT",
 77 | 		action = wezterm.action.SplitPane({
 78 | 			direction = "Right",
 79 | 			size = { Percent = 50 },
 80 | 		}),
 81 | 	},
 82 | 	{
 83 | 		key = "v",
 84 | 		mods = "CTRL|SHIFT|ALT",
 85 | 		action = wezterm.action.SplitPane({
 86 | 			direction = "Down",
 87 | 			size = { Percent = 50 },
 88 | 		}),
 89 | 	},
 90 | 	{
 91 | 		key = "U",
 92 | 		mods = "CTRL|SHIFT",
 93 | 		action = act.AdjustPaneSize({ "Left", 5 }),
 94 | 	},
 95 | 	{
 96 | 		key = "I",
 97 | 		mods = "CTRL|SHIFT",
 98 | 		action = act.AdjustPaneSize({ "Down", 5 }),
 99 | 	},
100 | 	{
101 | 		key = "O",
102 | 		mods = "CTRL|SHIFT",
103 | 		action = act.AdjustPaneSize({ "Up", 5 }),
104 | 	},
105 | 	{
106 | 		key = "P",
107 | 		mods = "CTRL|SHIFT",
108 | 		action = act.AdjustPaneSize({ "Right", 5 }),
109 | 	},
110 | 	{ key = "9", mods = "CTRL", action = act.PaneSelect },
111 | 	{ key = "L", mods = "CTRL", action = act.ShowDebugOverlay },
112 | 	{
113 | 		key = "O",
114 | 		mods = "CTRL|ALT",
115 | 		-- toggling opacity
116 | 		action = wezterm.action_callback(function(window, _)
117 | 			local overrides = window:get_config_overrides() or {}
118 | 			if overrides.window_background_opacity == 1.0 then
119 | 				overrides.window_background_opacity = 0.9
120 | 			else
121 | 				overrides.window_background_opacity = 1.0
122 | 			end
123 | 			window:set_config_overrides(overrides)
124 | 		end),
125 | 	},
126 | }
127 | 
128 | -- For example, changing the color scheme:
129 | config.color_scheme = "Cloud (terminal.sexy)"
130 | config.colors = {
131 | 	-- background = '#3b224c',
132 | 	-- background = "#181616", -- vague.nvim bg
133 | 	-- background = "#080808", -- almost black
134 | 	background = "#0c0b0f", -- dark purple
135 | 	-- background = "#020202", -- dark purple
136 | 	-- background = "#17151c", -- brighter purple
137 | 	-- background = "#16141a",
138 | 	-- background = "#0e0e12", -- bright washed lavendar
139 | 	-- background = 'rgba(59, 34, 76, 100%)',
140 | 	cursor_border = "#bea3c7",
141 | 	-- cursor_fg = "#281733",
142 | 	cursor_bg = "#bea3c7",
143 | 	-- selection_fg = '#281733',
144 | 
145 | 	tab_bar = {
146 | 		background = "#0c0b0f",
147 | 		-- background = "rgba(0, 0, 0, 0%)",
148 | 		active_tab = {
149 | 			bg_color = "#0c0b0f",
150 | 			fg_color = "#bea3c7",
151 | 			intensity = "Normal",
152 | 			underline = "None",
153 | 			italic = false,
154 | 			strikethrough = false,
155 | 		},
156 | 		inactive_tab = {
157 | 			bg_color = "#0c0b0f",
158 | 			fg_color = "#f8f2f5",
159 | 			intensity = "Normal",
160 | 			underline = "None",
161 | 			italic = false,
162 | 			strikethrough = false,
163 | 		},
164 | 
165 | 		new_tab = {
166 | 			-- bg_color = "rgba(59, 34, 76, 50%)",
167 | 			bg_color = "#0c0b0f",
168 | 			fg_color = "white",
169 | 		},
170 | 	},
171 | }
172 | 
173 | config.window_frame = {
174 | 	font = wezterm.font({ family = "Iosevka Custom", weight = "Regular" }),
175 | 	active_titlebar_bg = "#0c0b0f",
176 | 	-- active_titlebar_bg = "#181616",
177 | }
178 | 
179 | -- config.window_decorations = "INTEGRATED_BUTTONS | RESIZE"
180 | config.window_decorations = "NONE | RESIZE"
181 | config.default_prog = { "powershell.exe", "-NoLogo" }
182 | config.initial_cols = 80
183 | -- config.window_background_image = "C:/dev/misc/berk.png"
184 | -- config.window_background_image_hsb = {
185 | -- 	brightness = 0.1,
186 | -- }
187 | 
188 | -- wezterm.on("gui-startup", function(cmd)
189 | -- 	local args = {}
190 | -- 	if cmd then
191 | -- 		args = cmd.args
192 | -- 	end
193 | --
194 | -- 	local tab, pane, window = mux.spawn_window(cmd or {})
195 | -- 	-- window:gui_window():maximize()
196 | -- 	-- window:gui_window():set_position(0, 0)
197 | -- end)
198 | 
199 | -- and finally, return the configuration to wezterm
200 | return config
201 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # My Windows Config
 2 | 
 3 | # My Terminal Setup
 4 | 
 5 | - [Wezterm](https://wezfurlong.org/wezterm/index.html)
 6 | - [Wezterm Config File](.wezterm.lua)
 7 | 
 8 | > The font is a custom Iosevka installation from [here](https://typeof.net/Iosevka/customizer). This is my build plan [here](./private-build-plans.toml).
 9 | 
10 | # Window Manager Setup
11 | 
12 | - [GlazeWM](https://github.com/glzr-io/glazewm)
13 | - [GlazeWM Config File](./config.yaml)
14 | 
15 | # TopBar Setup
16 | 
17 | - [Zebar](https://github.com/glzr-io/zebar)
18 | 
19 | To configure Zebar:
20 | 
21 | 1. Copy [vanilla-clear](./vanilla-clear) widget to Zebar directory
22 | 
23 | ```
24 | cp ./vanilla-clear/ ~/.glzr/zebar/
25 | ```
26 | 
27 | 2. Than disable other widgets in Zebar system tray.
28 | 
29 | ### Old Zebar config
30 | 
31 | Zebar removed `.yaml` config in [v2.2.1](https://github.com/glzr-io/zebar/releases/tag/v2.2.1), but if you want, you can still use it: [Old Zebar Config](./zebar-config.yaml)
32 | 
33 | # Searching
34 | 
35 | - [Powertoys Run](https://learn.microsoft.com/en-us/windows/powertoys/run)
36 | 
37 | # Translucent Taskbar
38 | 
39 | - [TranslucentTB](https://apps.microsoft.com/detail/9pf4kz2vn4w9?hl=en-US&gl=US)
40 | 
41 | # Wallpaper
42 | 
43 | - [Link](https://wallhaven.cc/w/76edpv)
44 | 


--------------------------------------------------------------------------------
/config.yaml:
--------------------------------------------------------------------------------
  1 | general:
  2 |   # Commands to run when the WM has started (e.g. to run a script or launch
  3 |   # another application). Here we are running a batch script to start Zebar.
  4 |   startup_commands: ["shell-exec zebar"]
  5 |   # Whether to automatically focus windows underneath the cursor.
  6 | 
  7 |   focus_follows_cursor: false
  8 |   # Whether to switch back and forth between the previously focused
  9 | 
 10 |   # workspace when focusing the current workspace.
 11 |   toggle_workspace_on_refocus: false
 12 |   cursor_jump:
 13 |     # Whether to automatically move the cursor on the specified trigger.
 14 |     enabled: true
 15 |     # Trigger for cursor jump:
 16 | 
 17 |     # - 'monitor_focus': Jump when focus changes between monitors.
 18 |     # - 'window_focus': Jump when focus changes between windows.
 19 |     # trigger: "monitor_focus"
 20 |     trigger: "window_focus"
 21 | gaps:
 22 |   # Gap between adjacent windows.
 23 |   inner_gap: "10px"
 24 |   # Gap between windows and the screen edge.
 25 | 
 26 |   outer_gap:
 27 |     top: "50px"
 28 |     right: "10px"
 29 |     bottom: "10px"
 30 |     left: "10px"
 31 | window_effects:
 32 |   # Visual effects to apply to the focused window.
 33 |   focused_window:
 34 |     # Highlight the window with a colored border.
 35 |     # ** Exclusive to Windows 11 due to API limitations.
 36 |     border:
 37 |       enabled: true
 38 |       color: "#bea3c7"
 39 |   # Visual effects to apply to non-focused windows.
 40 | 
 41 |   other_windows:
 42 |     border:
 43 |       enabled: true
 44 |       color: "#a1a1a1"
 45 | window_behavior:
 46 |   # New windows are created in this state whenever possible.
 47 |   # Allowed values: 'tiling', 'floating'.
 48 |   initial_state: "tiling"
 49 |   # Sets the default options for when a new window is created. This also
 50 | 
 51 |   # changes the defaults for when the state change commands, like
 52 |   # `set-floating`, are used without any flags.
 53 |   state_defaults:
 54 |     floating:
 55 |       # Whether to center floating windows by default.
 56 |       centered: true
 57 |       # Whether to show floating windows as always on top.
 58 | 
 59 |       shown_on_top: false
 60 |     fullscreen:
 61 |       # Maximize the window if possible. If the window doesn't have a
 62 |       # maximize button, then it'll be fullscreen'ed normally instead.
 63 |       maximized: false
 64 |       # Whether to show fullscreen windows as always on top.
 65 | 
 66 |       shown_on_top: false
 67 | workspaces:
 68 |   - name: "1"
 69 |   - name: "2"
 70 |   - name: "3"
 71 |   - name: "4"
 72 |   - name: "5"
 73 |   - name: "6"
 74 |   - name: "7"
 75 |   - name: "8"
 76 |   - name: "9"
 77 | window_rules:
 78 |   - commands: ["ignore"]
 79 |     match:
 80 |       # Ignores any Zebar windows.
 81 |       - window_process: {equals: "zebar"}
 82 |       - window_title: {regex: "[Pp]icture.in.[Pp]icture"}
 83 |         # Ignores picture-in-picture windows for browsers.
 84 | 
 85 |         window_class: {regex: "Chrome_WidgetWin_1|MozillaDialogClass"}
 86 |       - window_process: {equals: "PowerToys.PowerAccent"}
 87 |         # Ignore rules for various 3rd-party apps.
 88 |       - window_process: {equals: "Lively"}
 89 |         window_class: {regex: "HwndWrapper*"}
 90 | binding_modes:
 91 |   # When enabled, the focused window can be resized via arrow keys or HJKL.
 92 |   - name: "resize"
 93 |     keybindings:
 94 |       - commands: ["resize --width -2%"]
 95 |         bindings: ["h", "left"]
 96 |       - commands: ["resize --width +2%"]
 97 |         bindings: ["l", "right"]
 98 |       - commands: ["resize --height +2%"]
 99 |         bindings: ["k", "up"]
100 |       - commands: ["resize --height -2%"]
101 |         bindings: ["j", "down"]
102 |       - commands: ["wm-disable-binding-mode --name resize"]
103 |         # Press enter/escape to return to default keybindings.
104 | 
105 |         bindings: ["escape", "enter"]
106 |   - name: "pause"
107 |     # When enabled, all keybindings are disabled except for alt+shift+p which
108 | 
109 |     # returns to default keybindings.
110 |     keybindings:
111 |       - commands: ["wm-disable-binding-mode --name pause"]
112 |         bindings: ["alt+shift+p"]
113 | keybindings:
114 |   # Shift focus in a given direction.
115 |   - commands: ["focus --direction left"]
116 |     bindings: ["alt+h", "alt+left"]
117 |   - commands: ["focus --direction right"]
118 |     bindings: ["alt+l", "alt+right"]
119 |   - commands: ["focus --direction up"]
120 |     bindings: ["alt+k", "alt+up"]
121 |   - commands: ["focus --direction down"]
122 |     bindings: ["alt+j", "alt+down"]
123 |   - commands: ["move --direction left"]
124 |     # Move focused window in a given direction.
125 | 
126 |     bindings: ["alt+shift+h", "alt+shift+left"]
127 |   - commands: ["move --direction right"]
128 |     bindings: ["alt+shift+l", "alt+shift+right"]
129 |   - commands: ["move --direction up"]
130 |     bindings: ["alt+shift+k", "alt+shift+up"]
131 |   - commands: ["move --direction down"]
132 |     bindings: ["alt+shift+j", "alt+shift+down"]
133 |   - commands: ["resize --width -2%"]
134 |     # Resize focused window by a percentage or pixel amount.
135 | 
136 |     bindings: ["alt+u"]
137 |   - commands: ["resize --width +2%"]
138 |     bindings: ["alt+p"]
139 |   - commands: ["resize --height +2%"]
140 |     bindings: ["alt+o"]
141 |   - commands: ["resize --height -2%"]
142 |     bindings: ["alt+i"]
143 |   - commands: ["wm-enable-binding-mode --name resize"]
144 |     # As an alternative to the resize keybindings above, resize mode enables
145 | 
146 |     # the name 'resize'.
147 |     # resizing via arrow keys or HJKL. The binding mode is defined above with
148 |     bindings: ["alt+r"]
149 |   - commands: ["wm-enable-binding-mode --name pause"]
150 |     # Disables all keybindings until alt+shift+p is pressed again.
151 | 
152 |     bindings: ["alt+shift+p"]
153 |   - commands: ["toggle-tiling-direction"]
154 |     # Change tiling direction. This determines where new tiling windows will
155 | 
156 |     # be inserted.
157 |     bindings: ["alt+v"]
158 |     # bindings: ["alt+c"]
159 |   - commands: ["toggle-floating --centered"]
160 |     # Change focus from tiling windows -> floating -> fullscreen.
161 | 
162 |     # Change the focused window to be floating.
163 |     # - commands: ["wm-cycle-focus"]
164 |     bindings: ["alt+shift+space"]
165 |   - commands: ["toggle-tiling"]
166 |     # Change the focused window to be tiling.
167 | 
168 |     bindings: ["alt+t"]
169 |   - commands: ["toggle-fullscreen"]
170 |     # Change the focused window to be fullscreen.
171 | 
172 |     bindings: ["alt+f"]
173 |   - commands: ["toggle-minimized"]
174 |     # Minimize focused window.
175 | 
176 |     bindings: ["alt+m"]
177 |   - commands: ["close"]
178 |     # Close focused window.
179 | 
180 |     bindings: ["alt+shift+q"]
181 |   - commands: ["wm-exit"]
182 |     # Kill GlazeWM process safely.
183 | 
184 |     bindings: ["alt+shift+e"]
185 |   - commands: ["wm-reload-config"]
186 |     # Re-evaluate configuration file.
187 | 
188 |     bindings: ["alt+shift+r"]
189 |   - commands: ["wm-redraw"]
190 |     # Redraw all windows.
191 | 
192 |     bindings: ["alt+shift+w"]
193 |   - commands: ["shell-exec wezterm-gui"]
194 |     # Launch CMD terminal. Alternatively, use `shell-exec wt` or
195 | 
196 |     # Terminal and Git Bash respectively.
197 |     # `shell-exec %ProgramFiles%/Git/git-bash.exe` to start Windows
198 |     bindings: ["alt+enter"]
199 |   - commands: ["focus --next-workspace"]
200 |     # Focus the next/previous workspace defined in `workspaces` config.
201 | 
202 |     bindings: ["alt+s"]
203 |   - commands: ["focus --prev-workspace"]
204 |     bindings: ["alt+a"]
205 |   - commands: ["focus --recent-workspace"]
206 |     # Focus the workspace that last had focus.
207 | 
208 |     bindings: ["alt+d"]
209 |   - commands: ["focus --workspace 1"]
210 |     # Change focus to a workspace defined in `workspaces` config.
211 | 
212 |     bindings: ["alt+1"]
213 |   - commands: ["focus --workspace 2"]
214 |     bindings: ["alt+2"]
215 |   - commands: ["focus --workspace 3"]
216 |     bindings: ["alt+3"]
217 |   - commands: ["focus --workspace 4"]
218 |     bindings: ["alt+4"]
219 |   - commands: ["focus --workspace 5"]
220 |     bindings: ["alt+5"]
221 |   - commands: ["focus --workspace 6"]
222 |     bindings: ["alt+6"]
223 |   - commands: ["focus --workspace 7"]
224 |     bindings: ["alt+7"]
225 |   - commands: ["focus --workspace 8"]
226 |     bindings: ["alt+8"]
227 |   - commands: ["focus --workspace 9"]
228 |     bindings: ["alt+9"]
229 |   - commands: ["move-workspace --direction left"]
230 |     # Move the focused window's parent workspace to a monitor in a given
231 | 
232 |     # direction.
233 |     bindings: ["alt+shift+a"]
234 |   - commands: ["move-workspace --direction right"]
235 |     bindings: ["alt+shift+f"]
236 |   - commands: ["move-workspace --direction up"]
237 |     bindings: ["alt+shift+d"]
238 |   - commands: ["move-workspace --direction down"]
239 |     bindings: ["alt+shift+s"]
240 |   - commands: ["move --workspace 1", "focus --workspace 1"]
241 |     # Move focused window to a workspace defined in `workspaces` config.
242 | 
243 |     bindings: ["alt+shift+1"]
244 |   - commands: ["move --workspace 2", "focus --workspace 2"]
245 |     bindings: ["alt+shift+2"]
246 |   - commands: ["move --workspace 3", "focus --workspace 3"]
247 |     bindings: ["alt+shift+3"]
248 |   - commands: ["move --workspace 4", "focus --workspace 4"]
249 |     bindings: ["alt+shift+4"]
250 |   - commands: ["move --workspace 5", "focus --workspace 5"]
251 |     bindings: ["alt+shift+5"]
252 |   - commands: ["move --workspace 6", "focus --workspace 6"]
253 |     bindings: ["alt+shift+6"]
254 |   - commands: ["move --workspace 7", "focus --workspace 7"]
255 |     bindings: ["alt+shift+7"]
256 |   - commands: ["move --workspace 8", "focus --workspace 8"]
257 |     bindings: ["alt+shift+8"]
258 |   - commands: ["move --workspace 9", "focus --workspace 9"]
259 |     bindings: ["alt+shift+9"]
260 | 


--------------------------------------------------------------------------------
/private-build-plans.toml:
--------------------------------------------------------------------------------
 1 | [buildPlans.IosevkaCustom]
 2 | family = "Iosevka Custom"
 3 | spacing = "term"
 4 | serifs = "sans"
 5 | noCvSs = true
 6 | exportGlyphNames = false
 7 | 
 8 |   [buildPlans.IosevkaCustom.variants]
 9 |   inherits = "ss14"
10 | 
11 |   [buildPlans.IosevkaCustom.ligations]
12 |   inherits = "haskell"
13 | 
14 | [buildPlans.IosevkaCustom.slopes.Upright]
15 | angle = 0
16 | shape = "upright"
17 | menu = "upright"
18 | css = "normal"
19 | 


--------------------------------------------------------------------------------
/vanilla-clear/styles.css:
--------------------------------------------------------------------------------
  1 | @import "https://www.nerdfonts.com/assets/css/webfont.css";
  2 | 
  3 | body {
  4 |   color: rgb(255 255 255 / 90%);
  5 |   font-family: ui-monospace, monospace;
  6 |   font-size: 12px;
  7 |   overflow: hidden;
  8 | }
  9 | 
 10 | html,
 11 | body,
 12 | #root {
 13 |   height: 100%;
 14 | }
 15 | 
 16 | #root {
 17 |   background: rgba(0, 0, 0, 15%);
 18 | }
 19 | 
 20 | .app {
 21 |   display: grid;
 22 |   grid-template-columns: 1fr 1fr 1fr;
 23 |   align-items: center;
 24 |   height: 100%;
 25 |   padding: 4px 1.5vw;
 26 | }
 27 | 
 28 | .left,
 29 | .center,
 30 | .right {
 31 |   display: flex;
 32 |   align-items: center;
 33 | }
 34 | 
 35 | .center {
 36 |   justify-self: center;
 37 | }
 38 | 
 39 | .right {
 40 |   justify-self: end;
 41 | }
 42 | 
 43 | .logo,
 44 | .binding-mode,
 45 | .tiling-direction,
 46 | .network,
 47 | .memory,
 48 | .cpu,
 49 | .battery {
 50 |   margin-right: 20px;
 51 | }
 52 | 
 53 | .workspaces {
 54 |   display: flex;
 55 |   align-items: center;
 56 | }
 57 | 
 58 | .workspace {
 59 |   background: rgb(255 255 255 / 5%);
 60 |   margin-right: 4px;
 61 |   padding: 4px 8px;
 62 |   color: rgb(255 255 255 / 90%);
 63 |   border: none;
 64 |   border-radius: 2px;
 65 |   cursor: pointer;
 66 | 
 67 |   &.displayed {
 68 |     background: rgb(255 255 255 / 15%);
 69 |   }
 70 | 
 71 |   &.focused,
 72 |   &:hover {
 73 |     background: rgb(255 255 255 / 50%);
 74 |   }
 75 | }
 76 | 
 77 | .binding-mode,
 78 | .tiling-direction {
 79 |   background: rgb(255 255 255 / 15%);
 80 |   color: rgb(255 255 255 / 90%);
 81 |   border-radius: 2px;
 82 |   line-height: 1;
 83 |   padding: 4px 8px;
 84 |   border: 0;
 85 |   cursor: pointer;
 86 | }
 87 | 
 88 | .binding-mode {
 89 |   margin-right: 4px;
 90 | }
 91 | 
 92 | .cpu .high-usage {
 93 |   color: #900029;
 94 | }
 95 | 
 96 | .battery {
 97 |   position: relative;
 98 | }
 99 | 
100 | .battery .charging-icon {
101 |   position: absolute;
102 |   font-size: 7px;
103 |   left: -8px;
104 |   top: 3px;
105 | }
106 | 
107 | i {
108 |   color: rgb(255 255 255 / 90%);
109 |   margin-right: 7px;
110 | }
111 | 


--------------------------------------------------------------------------------
/vanilla-clear/vanilla-clear.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 | 
  7 |     <!-- Base styles for better consistency across platforms (aka. CSS reset). -->
  8 |     <link rel="stylesheet" type="text/css" href="../normalize.css" />
  9 | 
 10 |     <!-- Custom styles. -->
 11 |     <link rel="stylesheet" type="text/css" href="./styles.css" />
 12 | 
 13 |     <!-- Add empty favicon to suppress not found errors. -->
 14 |     <link rel="icon" href="data:;" />
 15 | 
 16 |     <!-- Allows React to be run buildless via "text/babel" script below. -->
 17 |     <script
 18 |       src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"
 19 |       integrity="sha256-aS0B0wnsaDByLfE16h4MDCP1fQFccysd1YWOcV+gbBo="
 20 |       crossorigin="anonymous"
 21 |     ></script>
 22 |   </head>
 23 |   <body>
 24 |     <div id="root"></div>
 25 | 
 26 |     <script type="text/babel" data-type="module">
 27 |       import React, { useState, useEffect } from "https://esm.sh/react@18?dev";
 28 |       import { createRoot } from "https://esm.sh/react-dom@18/client?dev";
 29 |       import * as zebar from "https://esm.sh/zebar@2";
 30 | 
 31 |       const providers = zebar.createProviderGroup({
 32 |         network: { type: "network" },
 33 |         cpu: { type: "cpu" },
 34 |         date: { type: "date", formatting: "EEE d MMM t" },
 35 |         battery: { type: "battery" },
 36 |         memory: { type: "memory" },
 37 |         weather: { type: "weather" },
 38 |         keyboard: { type: "keyboard" },
 39 |       });
 40 | 
 41 |       createRoot(document.getElementById("root")).render(<App />);
 42 | 
 43 |       function App() {
 44 |         const [output, setOutput] = useState(providers.outputMap);
 45 | 
 46 |         useEffect(() => {
 47 |           providers.onOutput(() => setOutput(providers.outputMap));
 48 |         }, []);
 49 | 
 50 |         // Get icon to show for current network status.
 51 |         function getNetworkIcon(networkOutput) {
 52 |           switch (networkOutput.defaultInterface?.type) {
 53 |             case "ethernet":
 54 |               return <i className="nf nf-md-ethernet_cable"></i>;
 55 |             case "wifi":
 56 |               if (networkOutput.defaultGateway?.signalStrength >= 80) {
 57 |                 return <i className="nf nf-md-wifi_strength_4"></i>;
 58 |               } else if (networkOutput.defaultGateway?.signalStrength >= 65) {
 59 |                 return <i className="nf nf-md-wifi_strength_3"></i>;
 60 |               } else if (networkOutput.defaultGateway?.signalStrength >= 40) {
 61 |                 return <i className="nf nf-md-wifi_strength_2"></i>;
 62 |               } else if (networkOutput.defaultGateway?.signalStrength >= 25) {
 63 |                 return <i className="nf nf-md-wifi_strength_1"></i>;
 64 |               } else {
 65 |                 return <i className="nf nf-md-wifi_strength_outline"></i>;
 66 |               }
 67 |             default:
 68 |               return <i className="nf nf-md-wifi_strength_off_outline"></i>;
 69 |           }
 70 |         }
 71 | 
 72 |         // Get icon to show for how much of the battery is charged.
 73 |         function getBatteryIcon(batteryOutput) {
 74 |           if (batteryOutput.chargePercent > 90)
 75 |             return <i className="nf nf-fa-battery_4"></i>;
 76 |           if (batteryOutput.chargePercent > 70)
 77 |             return <i className="nf nf-fa-battery_3"></i>;
 78 |           if (batteryOutput.chargePercent > 40)
 79 |             return <i className="nf nf-fa-battery_2"></i>;
 80 |           if (batteryOutput.chargePercent > 20)
 81 |             return <i className="nf nf-fa-battery_1"></i>;
 82 |           return <i className="nf nf-fa-battery_0"></i>;
 83 |         }
 84 | 
 85 |         // Get icon to show for current weather status.
 86 |         function getWeatherIcon(weatherOutput) {
 87 |           switch (weatherOutput.status) {
 88 |             case "clear_day":
 89 |               return <i className="nf nf-weather-day_sunny"></i>;
 90 |             case "clear_night":
 91 |               return <i className="nf nf-weather-night_clear"></i>;
 92 |             case "cloudy_day":
 93 |               return <i className="nf nf-weather-day_cloudy"></i>;
 94 |             case "cloudy_night":
 95 |               return <i className="nf nf-weather-night_alt_cloudy"></i>;
 96 |             case "light_rain_day":
 97 |               return <i className="nf nf-weather-day_sprinkle"></i>;
 98 |             case "light_rain_night":
 99 |               return <i className="nf nf-weather-night_alt_sprinkle"></i>;
100 |             case "heavy_rain_day":
101 |               return <i className="nf nf-weather-day_rain"></i>;
102 |             case "heavy_rain_night":
103 |               return <i className="nf nf-weather-night_alt_rain"></i>;
104 |             case "snow_day":
105 |               return <i className="nf nf-weather-day_snow"></i>;
106 |             case "snow_night":
107 |               return <i className="nf nf-weather-night_alt_snow"></i>;
108 |             case "thunder_day":
109 |               return <i className="nf nf-weather-day_lightning"></i>;
110 |             case "thunder_night":
111 |               return <i className="nf nf-weather-night_alt_lightning"></i>;
112 |           }
113 |         }
114 | 
115 |         return (
116 |           <div className="app">
117 |             <div className="left">
118 |               <i className="logo nf nf-fa-windows"></i>
119 |             </div>
120 | 
121 |             <div className="center">{output.date?.formatted}</div>
122 | 
123 |             <div className="right">
124 |               {output.network && (
125 |                 <div className="network">
126 |                   {getNetworkIcon(output.network)}
127 |                   {output.network.defaultGateway?.ssid}
128 |                 </div>
129 |               )}
130 | 
131 |               {output.memory && (
132 |                 <div className="memory">
133 |                   <i className="nf nf-fae-chip"></i>
134 |                   {Math.round(output.memory.usage)}%
135 |                 </div>
136 |               )}
137 | 
138 |               {output.cpu && (
139 |                 <div className="cpu">
140 |                   <i className="nf nf-oct-cpu"></i>
141 | 
142 |                   {/* Change the text color if the CPU usage is high. */}
143 |                   <span className={output.cpu.usage > 85 ? "high-usage" : ""}>
144 |                     {Math.round(output.cpu.usage)}%
145 |                   </span>
146 |                 </div>
147 |               )}
148 | 
149 |               {output.battery && (
150 |                 <div className="battery">
151 |                   {/* Show icon for whether battery is charging. */}
152 |                   {output.battery.isCharging && (
153 |                     <i className="nf nf-md-power_plug charging-icon"></i>
154 |                   )}
155 |                   {getBatteryIcon(output.battery)}
156 |                   {Math.round(output.battery.chargePercent)}%
157 |                 </div>
158 |               )}
159 | 
160 |               {output.weather && (
161 |                 <div className="weather">
162 |                   {getWeatherIcon(output.weather)}
163 |                   {Math.round(output.weather.celsiusTemp)}°C
164 |                 </div>
165 |               )}
166 |             </div>
167 |           </div>
168 |         );
169 |       }
170 |     </script>
171 |   </body>
172 | </html>
173 | 


--------------------------------------------------------------------------------
/vanilla-clear/vanilla-clear.zebar.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://github.com/glzr-io/zebar/raw/v2.1.0/resources/widget-schema.json",
 3 |   "htmlPath": "./vanilla-clear.html",
 4 |   "zOrder": "bottom_most",
 5 |   "shownInTaskbar": false,
 6 |   "focused": false,
 7 |   "resizable": false,
 8 |   "transparent": true,
 9 |   "presets": [
10 |     {
11 |       "name": "vanilla-clear",
12 |       "anchor": "top_left",
13 |       "offsetX": "0px",
14 |       "offsetY": "0px",
15 |       "width": "100%",
16 |       "height": "40px",
17 |       "monitorSelection": {
18 |         "type": "all"
19 |       }
20 |     }
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/zebar-config.yaml:
--------------------------------------------------------------------------------
  1 | # Yaml is white-space sensitive (use 2 spaces to indent).
  2 | 
  3 | ###
  4 | # Define a new window with an id of 'bar'. This window can then be opened
  5 | # via the Zebar cli by running 'zebar open bar --args <ARGS...>'.
  6 | #
  7 | # Docs regarding window: https://some-future-docs-link.com
  8 | window/bar:
  9 |   providers: ["self"]
 10 |   # Width of the window in physical pixels.
 11 |   width: "{{ self.args.MONITOR_WIDTH }}"
 12 |   # Height of the window in physical pixels.
 13 |   height: "40"
 14 |   # X-position of the window in physical pixels.
 15 |   position_x: "{{ self.args.MONITOR_X }}"
 16 |   # Y-position of the window in physical pixels.
 17 |   position_y: "{{ self.args.MONITOR_Y }}"
 18 |   # Whether to show the window above/below all others.
 19 |   # Allowed values: 'always_on_top', 'always_on_bottom', 'normal'.
 20 |   z_order: "normal"
 21 |   # Whether the window should be shown in the taskbar.
 22 |   shown_in_taskbar: false
 23 |   # Whether the window should have resize handles.
 24 |   resizable: false
 25 |   # Styles to apply globally within the window. For example, we can use
 26 |   # this to import the Nerdfonts icon font. Ref https://www.nerdfonts.com/cheat-sheet
 27 |   # for a cheatsheet of available Nerdfonts icons.
 28 |   global_styles: |
 29 |     @import "https://www.nerdfonts.com/assets/css/webfont.css";
 30 |   # CSS styles to apply to the root element within the window. Using CSS
 31 |   # nesting, we can also target nested elements (e.g. below we set the
 32 |   # color and margin-right of icons).
 33 |   styles: |
 34 |     display: grid;
 35 |     grid-template-columns: 1fr 1fr 1fr;
 36 |     align-items: center;
 37 |     height: 100%;
 38 |     color: rgb(255 255 255 / 90%);
 39 |     font-family: ui-monospace, monospace;
 40 |     font-size: 12px;
 41 |     padding: 4px 24px;
 42 |     # border-bottom: 1px solid rgb(255 255 255 / 5%);;
 43 |     # background: linear-gradient(rgb(0 0 0 / 90%), rgb(5 2 20 / 85%));
 44 |     background: rgba(0, 0, 0, 15%);
 45 | 
 46 |     i {
 47 |       # color: rgb(115 130 175 / 95%);
 48 |       color: rgb(255 255 255 / 90%);
 49 |       margin-right: 7px;
 50 |     }
 51 |   group/left:
 52 |     styles: |
 53 |       display: flex;
 54 |       align-items: center;
 55 |     template/logo:
 56 |       styles: |
 57 |         margin-right: 20px;
 58 |       template: |
 59 |         <i class="nf nf-fa-windows"></i>
 60 |     template/glazewm_workspaces:
 61 |       styles: |
 62 |         display: flex;
 63 |         align-items: center;
 64 | 
 65 |         .workspace {
 66 |           background: rgb(255 255 255 / 5%);
 67 |           margin-right: 4px;
 68 |           padding: 4px 8px;
 69 |           color: rgb(255 255 255 / 90%);
 70 |           border: none;
 71 |           border-radius: 2px;
 72 |           cursor: pointer;
 73 | 
 74 |           &.displayed {
 75 |             background: rgb(255 255 255 / 15%);
 76 |           }
 77 | 
 78 |           &.focused,
 79 |           &:hover {
 80 |             # background: rgb(75 115 255 / 50%);
 81 |             background: rgb(255 255 255 / 50%);
 82 |           }
 83 |         }
 84 |       providers: ["glazewm"]
 85 |       events:
 86 |         - type: "click"
 87 |           fn_path: "script.js#focusWorkspace"
 88 |           selector: ".workspace"
 89 |       template: |
 90 |         @for (workspace of glazewm.currentWorkspaces) {
 91 |           <button
 92 |             class="workspace {{ workspace.hasFocus ? 'focused' : '' }} {{ workspace.isDisplayed ? 'displayed' : '' }}"
 93 |             id="{{ workspace.name }}"
 94 |           >
 95 |             {{ workspace.displayName ?? workspace.name }}
 96 |           </button>
 97 |         }
 98 |   group/center:
 99 |     styles: |
100 |       justify-self: center;
101 |     template/clock:
102 |       providers: ["date"]
103 |       # Available date tokens: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
104 |       template: |
105 |         {{ date.toFormat(date.now, 'EEE	d MMM t') }}
106 |   group/right:
107 |     styles: |
108 |       justify-self: end;
109 |       display: flex;
110 | 
111 |       .template {
112 |         margin-left: 20px;
113 |       }
114 |     template/glazewm_other:
115 |       providers: ["glazewm"]
116 |       styles: |
117 |         .binding-mode,
118 |         .tiling-direction {
119 |           background: rgb(255 255 255 / 15%);
120 |           color: rgb(255 255 255 / 90%);
121 |           border-radius: 2px;
122 |           padding: 4px 6px;
123 |           margin: 0;
124 |         }
125 |       template: |
126 |         @for (bindingMode of glazewm.bindingModes) {
127 |           <span class="binding-mode">
128 |             {{ bindingMode.displayName ?? bindingMode.name }}
129 |           </span>
130 |         }
131 | 
132 |         @if (glazewm.tilingDirection === 'horizontal') {
133 |           <i class="tiling-direction nf nf-md-swap_horizontal"></i>
134 |         } @else {
135 |           <i class="tiling-direction nf nf-md-swap_vertical"></i>
136 |         }
137 |     template/network:
138 |       providers: ["network"]
139 |       template: |
140 |         <!-- Show icon based on signal strength. -->
141 |         @if (network.defaultInterface?.type === 'ethernet') {
142 |           <i class="nf nf-md-ethernet_cable"></i>
143 |         } @else if (network.defaultInterface?.type === 'wifi') {
144 |           @if (network.defaultGateway?.signalStrength >= 80) {<i class="nf nf-md-wifi_strength_4"></i>}
145 |           @else if (network.defaultGateway?.signalStrength >= 65) {<i class="nf nf-md-wifi_strength_3"></i>}
146 |           @else if (network.defaultGateway?.signalStrength >= 40) {<i class="nf nf-md-wifi_strength_2"></i>}
147 |           @else if (network.defaultGateway?.signalStrength >= 25) {<i class="nf nf-md-wifi_strength_1"></i>}
148 |           @else {<i class="nf nf-md-wifi_strength_outline"></i>}
149 |           {{ network.defaultGateway?.ssid }}
150 |         } @else {
151 |           <i class="nf nf-md-wifi_strength_off_outline"></i>
152 |         }
153 |     template/memory:
154 |       providers: ["memory"]
155 |       template: |
156 |         <i class="nf nf-fae-chip"></i>
157 |         {{ Math.round(memory.usage) }}%
158 |     template/cpu:
159 |       providers: ["cpu"]
160 |       styles: |
161 |         .high-usage {
162 |           color: #900029;
163 |         }
164 |       template: |
165 |         <i class="nf nf-oct-cpu"></i>
166 | 
167 |         <!-- Change the text color if the CPU usage is high. -->
168 |         @if (cpu.usage > 85) {
169 |           <span class="high-usage">{{ Math.round(cpu.usage) }}%</span>
170 |         } @else {
171 |           <span>{{ Math.round(cpu.usage) }}%</span>
172 |         }
173 |     template/battery:
174 |       providers: ["battery"]
175 |       styles: |
176 |         position: relative;
177 | 
178 |         .charging-icon {
179 |           position: absolute;
180 |           font-size: 11px;
181 |           left: 7px;
182 |           top: 2px;
183 |         }
184 |       template: |
185 |         <!-- Show icon for whether battery is charging. -->
186 |         @if (battery.isCharging) {<i class="nf nf-md-power_plug charging-icon"></i>}
187 | 
188 |         <!-- Show icon for how much of the battery is charged. -->
189 |         @if (battery.chargePercent > 90) {<i class="nf nf-fa-battery_4"></i>}
190 |         @else if (battery.chargePercent > 70) {<i class="nf nf-fa-battery_3"></i>}
191 |         @else if (battery.chargePercent > 40) {<i class="nf nf-fa-battery_2"></i>}
192 |         @else if (battery.chargePercent > 20) {<i class="nf nf-fa-battery_1"></i>}
193 |         @else {<i class="nf nf-fa-battery_0"></i>}
194 | 
195 |         {{ Math.round(battery.chargePercent) }}%
196 |     template/weather:
197 |       providers: ["weather"]
198 |       template: |
199 |         @switch (weather.status) {
200 |           @case ('clear_day') {<i class="nf nf-weather-day_sunny"></i>}
201 |           @case ('clear_night') {<i class="nf nf-weather-night_clear"></i>}
202 |           @case ('cloudy_day') {<i class="nf nf-weather-day_cloudy"></i>}
203 |           @case ('cloudy_night') {<i class="nf nf-weather-night_alt_cloudy"></i>}
204 |           @case ('light_rain_day') {<i class="nf nf-weather-day_sprinkle"></i>}
205 |           @case ('light_rain_night') {<i class="nf nf-weather-night_alt_sprinkle"></i>}
206 |           @case ('heavy_rain_day') {<i class="nf nf-weather-day_rain"></i>}
207 |           @case ('heavy_rain_night') {<i class="nf nf-weather-night_alt_rain"></i>}
208 |           @case ('snow_day') {<i class="nf nf-weather-day_snow"></i>}
209 |           @case ('snow_night') {<i class="nf nf-weather-night_alt_snow"></i>}
210 |           @case ('thunder_day') {<i class="nf nf-weather-day_lightning"></i>}
211 |           @case ('thunder_night') {<i class="nf nf-weather-night_alt_lightning"></i>}
212 |         }
213 |         {{ weather.celsiusTemp }}°
214 | 


--------------------------------------------------------------------------------