(Widget) Whkd - thesleepingsage/yasb-wiki GitHub Wiki

WHKD Widget Options

Whkd is a simple hotkey daemon for Windows that reacts to input events by executing commands. More information can be found here.

Option Type Default Description
label string "\uf11c" The string for the label button.
special_keys list None A list of special keys to be used as hotkeys.
container_padding dict {'top': 0, 'left': 0, 'bottom': 0, 'right': 0} Explicitly set padding inside widget container.
animation dict {'enabled': True, 'type': 'fadeInOut', 'duration': 200} Animation settings for the widget.
container_shadow dict None Container shadow options.
label_shadow dict None Label shadow options.

Example Configuration

  whkd:
    type: "yasb.whkd.WhkdWidget"
    options:
      label: "<span>\uf11c</span>"
      special_keys:
        - key: "win"
          key_replace: "\ue70f"
        - key: "ctrl"
          key_replace: "Ctrl"
        - key: "alt" 
          key_replace: "Alt"
        - key: "shift"
          key_replace: "Shift"
        - key: "left"
          key_replace: "\u2190"
        - key: "right"
          key_replace: "\u2192"
        - key: "up"
          key_replace: "\u2191"
        - key: "down"
          key_replace: "\u2193"
      label_shadow:
        enabled: true
        color: "black"
        radius: 3
        offset: [ 1, 1 ]

Description of Options

  • label: The string for the label button.
  • special_keys: A list of special keys to be used as hotkeys. The list contains dictionaries with two keys: key and key_replace. The key is the special key to be used as a hotkey and the key_replace is the string to replace the special key with.
    • key: The special key to be used as a hotkey.
    • key_replace: The string to replace the special key with.
  • container_padding: Explicitly set padding inside widget container.
  • animation: A dictionary specifying the animation settings for the widget. It contains three keys: enabled, type, and duration. The type can be fadeInOut and the duration is the animation duration in milliseconds.
  • container_shadow: Container shadow options.
  • label_shadow: Label shadow options.

Note

The special keys are keys which you can style and replace with custom icons. Special keys settings are optional. If you don't want to use special keys, you can leave the special_keys option empty.

Note

To use header like on screenshot below, you need to edit whkdrc and comment string with double hash ##. Example ## Open Applications

Style

.whkd-widget {}
.whkd-widget .windget-container {}
.whkd-widget .label {}
.whkd-widget .icon {}
.whkd-popup {}
.whkd-popup .edit-config-button {}
.whkd-popup .keybind-buttons-container {}
.whkd-popup .keybind-button {}
.whkd-popup .keybind-button.special {}
.whkd-popup .keybind-row{}
.whkd-popup .plus-separator {}
.whkd-popup .filter-input {}
.whkd-popup .keybind-command {}
.whkd-popup .keybind-header {}

Example Styling

.whkd-widget {
    padding: 0 6px 0 6px;
}
.whkd-widget .icon {
    font-size: 18px;
}
.whkd-popup .edit-config-button {
    background-color:#1743a1;
    color: #ffffff;
    padding: 4px 8px 6px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    font-family: 'Segoe UI', sans-serif;
}

.whkd-popup .keybind-buttons-container {
    min-width: 240px;
}
.whkd-popup .keybind-button {
    background-color: #343538;
    color: white;
    padding: 4px 8px 6px 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px inset #4f5055;
    border-bottom: 2px inset #4f5055;
    border-radius: 4px;
    font-family: 'JetBrainsMono NFP';
}
.whkd-popup .keybind-button.special {
    background-color: #343538;
}
.whkd-popup .keybind-row:hover{
    background-color: rgba(136, 138, 155, 0.2);
    border-radius: 8px;
}
.whkd-popup .plus-separator {
    padding: 0 0px;
    border:none;
    font-size: 16px;
    font-weight: bold;
    background-color:transparent
}
.whkd-popup .filter-input {
    padding: 0 8px 2px 8px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    outline: none;
    color: white;
    background-color: #2e2e2e;
    min-height: 32px;
}
.whkd-popup .filter-input:focus {
    border: 1px solid #0078D4;
}
.whkd-popup .keybind-command {
    font-size: 14px;
}
.whkd-popup .keybind-header {
    font-size: 16px;
    font-weight: 600;
    color: white;
    padding: 8px 0;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

Preview of the weather card

YASB WHKD Widget

⚠️ **GitHub.com Fallback** ⚠️