Zebar config

config.yaml

# Yaml is white-space sensitive (use 2 spaces to indent).

###
# Define a new window with an id of 'bar'. This window can then be opened
# via the Zebar cli by running 'zebar open bar --args <ARGS...>'.
#
# Docs regarding window: https://some-future-docs-link.com
window/bar:
  providers: ["self"]
  # Width of the window in physical pixels.
  width: "{{ self.args.MONITOR_WIDTH }}"
  # Height of the window in physical pixels.
  height: "40"
  # X-position of the window in physical pixels.
  position_x: "{{ self.args.MONITOR_X }}"
  # Y-position of the window in physical pixels.
  position_y: "{{ self.args.MONITOR_Y }}"
  # Whether to show the window above/below all others.
  # Allowed values: 'always_on_top', 'always_on_bottom', 'normal'.
  z_order: "normal"
  # Whether the window should be shown in the taskbar.
  shown_in_taskbar: false
  # Whether the window should have resize handles.
  resizable: false
  # Styles to apply globally within the window. For example, we can use
  # this to import the Nerdfonts icon font. Ref https://www.nerdfonts.com/cheat-sheet
  # for a cheatsheet of available Nerdfonts icons.
  global_styles: |
    @import "https://www.nerdfonts.com/assets/css/webfont.css";
  # CSS styles to apply to the root element within the window. Using CSS
  # nesting, we can also target nested elements (e.g. below we set the
  # color and margin-right of icons).
  styles: |
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    height: 100%;
    color: rgb(255 255 255 / 90%);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 4px 24px;
    padding-left: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 5%);;
    background: linear-gradient(rgb(0 0 0 / 90%), rgb(5 2 20 / 85%));

    i {
      color: rgb(115 130 175 / 95%);
      margin-right: 7px;
    }

  group/left:
    styles: |
      display: flex;
      align-items: center;

    template/glazewm_workspaces:
      styles: |
        display: flex;
        align-items: center;

        .workspace {
          background: rgb(255 255 255 / 5%);
          margin-right: 4px;
          padding: 4px 8px;
          color: rgb(255 255 255 / 90%);
          border: none;
          border-radius: 2px;
          cursor: pointer;

          &.displayed {
            background: rgb(255 255 255 / 15%);
          }

          &.focused,
          &:hover {
            background: rgb(75 115 255 / 50%);
          }
        }
      providers: ["glazewm"]
      events:
        - type: "click"
          fn_path: "script.js#focusWorkspace"
          selector: ".workspace"
      template: |
        @for (workspace of glazewm.currentWorkspaces) {
          <button
            class="workspace {{ workspace.hasFocus ? 'focused' : '' }} {{ workspace.isDisplayed ? 'displayed' : '' }}"
            id="{{ workspace.name }}"
          >
            {{ workspace.displayName ?? workspace.name }}
          </button>
        }

  group/center:
    styles: |
      justify-self: center;

    template/clock:
      providers: ["date"]
      # Available date tokens: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
      template: |
        {{ date.toFormat(date.now, 'EEE	d MMM t') }}

  group/right:
    styles: |
      justify-self: end;
      display: flex;

      .template {
        margin-left: 20px;
      }

    template/glazewm_other:
      providers: ["glazewm"]
      styles: |
        .binding-mode,
        .tiling-direction {
          background: rgb(255 255 255 / 15%);
          color: rgb(255 255 255 / 90%);
          border-radius: 2px;
          padding: 4px 6px;
          margin: 0;
        }

      template: |
        @for (bindingMode of glazewm.bindingModes) {
          <span class="binding-mode">
            {{ bindingMode.displayName ?? bindingMode.name }}
          </span>
        }

        @if (glazewm.tilingDirection === 'horizontal') {
          <i class="tiling-direction nf nf-md-swap_horizontal"></i>
        } @else {
          <i class="tiling-direction nf nf-md-swap_vertical"></i>
        }

    template/network:
      providers: ["network"]
      template: |
        <!-- Show icon based on signal strength. -->
        @if (network.defaultInterface?.type === 'ethernet') {
          <i class="nf nf-md-ethernet_cable"></i>
        } @else if (network.defaultInterface?.type === 'wifi') {
          @if (network.defaultGateway?.signalStrength >= 80) {<i class="nf nf-md-wifi_strength_4"></i>}
          @else if (network.defaultGateway?.signalStrength >= 65) {<i class="nf nf-md-wifi_strength_3"></i>}
          @else if (network.defaultGateway?.signalStrength >= 40) {<i class="nf nf-md-wifi_strength_2"></i>}
          @else if (network.defaultGateway?.signalStrength >= 25) {<i class="nf nf-md-wifi_strength_1"></i>}
          @else {<i class="nf nf-md-wifi_strength_outline"></i>}
          {{ network.defaultGateway?.ssid }}
        } @else {
          <i class="nf nf-md-wifi_strength_off_outline"></i>
        }

    template/memory:
      providers: ["memory"]
      template: |
        <i class="nf nf-fae-chip"></i>
        {{ Math.round(memory.usage) }}%

    template/cpu:
      providers: ["cpu"]
      styles: |
        .high-usage {
          color: #900029;
        }
      template: |
        <i class="nf nf-oct-cpu"></i>

        <!-- Change the text color if the CPU usage is high. -->
        @if (cpu.usage > 85) {
          <span class="high-usage">{{ Math.round(cpu.usage) }}%</span>
        } @else {
          <span>{{ Math.round(cpu.usage) }}%</span>
        }

    template/battery:
      providers: ["battery"]
      styles: |
        position: relative;

        .charging-icon {
          position: absolute;
          font-size: 11px;
          left: 7px;
          top: 2px;
        }
      template: |
        <!-- Show icon for whether battery is charging. -->
        @if (battery.isCharging) {<i class="nf nf-md-power_plug charging-icon"></i>}

        <!-- Show icon for how much of the battery is charged. -->
        @if (battery.chargePercent > 90) {<i class="nf nf-fa-battery_4"></i>}
        @else if (battery.chargePercent > 70) {<i class="nf nf-fa-battery_3"></i>}
        @else if (battery.chargePercent > 40) {<i class="nf nf-fa-battery_2"></i>}
        @else if (battery.chargePercent > 20) {<i class="nf nf-fa-battery_1"></i>}
        @else {<i class="nf nf-fa-battery_0"></i>}

        {{ Math.round(battery.chargePercent) }}%

    template/weather:
      providers: ["weather"]
      template: |
        @switch (weather.status) {
          @case ('clear_day') {<i class="nf nf-weather-day_sunny"></i>}
          @case ('clear_night') {<i class="nf nf-weather-night_clear"></i>}
          @case ('cloudy_day') {<i class="nf nf-weather-day_cloudy"></i>}
          @case ('cloudy_night') {<i class="nf nf-weather-night_alt_cloudy"></i>}
          @case ('light_rain_day') {<i class="nf nf-weather-day_sprinkle"></i>}
          @case ('light_rain_night') {<i class="nf nf-weather-night_alt_sprinkle"></i>}
          @case ('heavy_rain_day') {<i class="nf nf-weather-day_rain"></i>}
          @case ('heavy_rain_night') {<i class="nf nf-weather-night_alt_rain"></i>}
          @case ('snow_day') {<i class="nf nf-weather-day_snow"></i>}
          @case ('snow_night') {<i class="nf nf-weather-night_alt_snow"></i>}
          @case ('thunder_day') {<i class="nf nf-weather-day_lightning"></i>}
          @case ('thunder_night') {<i class="nf nf-weather-night_alt_lightning"></i>}
        }
        {{ weather.celsiusTemp }}°