Microphone Widget Configuration#

Shows your microphone volume and mute status. You can adjust the recording level by scrolling your mouse wheel, click to mute/unmute, and click to open a popup where you can choose input devices and adjust levels.

Callbacks#

The callbacks option maps mouse buttons (on_left, on_middle, on_right) to actions. All keys are optional, the values shown are the defaults.

callbacks:
  on_left: "toggle_mic_menu"
  on_middle: "toggle_label"
  on_right: "toggle_mute"

Available actions:

• toggle_label - Switch between label and label_alt.
• toggle_mute - Mute or unmute the microphone.
• toggle_mic_menu - Open or close the microphone menu.
• do_nothing - Do nothing.
• exec <command> - Run a command, for example exec cmd.exe /c start ms-settings:network.

Mic Menu Options#

The mic_menu option accepts the following keys. All keys are optional, the values shown are the defaults.

mic_menu:
  blur: true
  round_corners: true
  round_corners_type: "normal"
  border_color: "system"
  alignment: "right"
  direction: "down"
  offset_top: 6
  offset_left: 0

Progress Bar Options#

The progress_bar option accepts the following keys. All keys are optional, the values shown are the defaults.

progress_bar:
  enabled: false
  progress_type: "circular"
  size: 18
  thickness: 3
  radius: 0
  color: "#00C800"
  background_color: "#3C3C3C"
  position: "left"
  animation: true

Example Configuration#

microphone:
  type: "yasb.microphone.MicrophoneWidget"
  options:
    label: "<span>{icon}</span>"
    label_alt: "<span>{icon}</span> {level}"
    mute_text: "mute"
    icons:
      normal: "\uf130"
      muted: "\uf131"
    mic_menu:
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: "system"
      alignment: "right"
      direction: "down"
    callbacks:
      on_left: "toggle_mic_menu"
      on_middle: "toggle_label"
      on_right: "toggle_mute"

Description of Options#

• label: The format string for the microphone widget. Displays the microphone icon or level.
• label_alt: The alternative format string for the microphone widget. Displays the microphone icon or level.
• class_name: Additional CSS class name for the widget. This allows for custom styling.
• tooltip: Whether to show the tooltip on hover.
• mute_text: Text used by {level} to indicate muted volume.
• scroll_step: The step size for volume adjustment when scrolling. The value is in percentage points (1-100).
• invert_wheel: Whether to invert wheel scroll direction (useful on laptop trackpads).
• icons: A dictionary specifying the icons for the microphone widget. The keys are normal and muted, and the values are the unicode characters for the icons.
• keybindings: A list of global hotkeys for this widget. See Keybindings.
• callbacks: Mouse event callbacks. See Callbacks.
• mic_menu: A dictionary specifying the menu settings for the widget. It contains the following keys:
• blur: Enable blur effect for the menu.
• round_corners: Enable round corners for the menu (this option is not supported on Windows 10).
• round_corners_type: Set the type of round corners for the menu (normal, small) (this option is not supported on Windows 10).
• border_color: Set the border color for the menu (this option is not supported on Windows 10). Available options are "system", HEX or None.
• alignment: Set the alignment of the menu (left, right).
• direction: Set the direction of the menu (up, down).
• offset_top: Set the top offset of the menu.
• offset_left: Set the left offset of the menu.
• progress_bar: A dictionary containing settings for the progress bar. It includes:
• enabled: Whether the progress bar is enabled.
• progress_type: The type of progress bar. Options are "circular", "linear_horizontal", or "linear_vertical".
• position: The position of the progress bar, either "left" or "right".
• size: The length of the progress bar (or diameter if circular). Minimum is 1, maximum is 200.
• thickness: The thickness of the progress bar. Minimum is 1, maximum is 100.
• radius: The border radius for the linear progress bar corners. Minimum is 0, maximum is 100.
• color: The color of the progress bar. Color can be a single color or a gradient. For example, color: "#57948a" or color: ["#57948a", "#ff0000"] for a gradient.
• background_color: The background color of the progress bar.
• animation: Whether to enable smooth change of the progress bar value.

Available Styles#

.microphone-widget {}
.microphone-widget.your_class {} /* If you are using class_name option */
.microphone-widget .widget-container {}
.microphone-widget .label {}
.microphone-widget .label.alt {}
.microphone-widget .icon {}
.microphone-widget .label.muted {} /* Applied when microphone is muted */
.microphone-widget .icon.muted {} /* Applied when microphone is muted */
.microphone-widget .label.no-device {} /* Applied when no microphone device is connected */
.microphone-widget .icon.no-device {} /* Applied when no microphone device is connected */
/* Microphone progress bar styles if enabled */
.microphone-widget .progress-container {} 
/* Microphone menu styles */
.microphone-widget .microphone-menu {}
/* System microphone volume */
.microphone-menu .system-volume-container .volume-slider {}
.microphone-menu .system-volume-container .volume-slider::groove {}
.microphone-menu .system-volume-container .volume-slider::handle{}
/* Device list styles (if multiple microphones) */
.microphone-menu .microphone-container .device {}
.microphone-menu .microphone-container .device.selected {}
.microphone-menu .microphone-container .device:hover {}

Example Styles#

.microphone-widget .icon {
    color: #ff6b6b;
    margin: 0 2px 0 0;
}
.microphone-menu {
    background-color: rgba(17, 17, 27, 0.4); 
    min-width: 300px;
}
/* System microphone volume */
.microphone-menu .system-volume-container .volume-slider {
    border: none;
}
/* Device list styles */
.microphone-menu .microphone-container .device {
    background-color: transparent;
    border: none;
    padding: 6px 8px 6px 4px;
    margin: 2px 0;
    font-size: 12px;
    border-radius: 4px;
}
.microphone-menu .microphone-container .device.selected {
    background-color: rgba(255, 255, 255, 0.085);
}
.microphone-menu .microphone-container .device:hover {
    background-color: rgba(255, 255, 255, 0.06);
}