[create-theme]: Simple Floating Widgets

[elrondforwin]

Name

Simple Floating Widgets

Description

Easily customizable, compatible with komorebi.

Homepage

https://github.com/amnweb/yasb-themes

Image

https://i.imgur.com/qiEXutY.png

Theme Styles

/*VARIABLES AND SOME DEFAULT SETTINGS*/
:root {
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --peachedit: #ecd093;
    --peachedit2: #e9bb77;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface1: #282936;
    --base: #1e1e2e;
    --mantle: rgba(24, 24, 37, 0.5);
    --crust: rgba(17, 17, 27, 0.5);
}
*{
    font-size: 12px;
    color: #bec8e7;
    font-weight: 600;
    font-family: "JetBrainsMono NFP";
    margin: 0;
    padding: 0;
}
/*GENERAL CONFIGRATIONS*/
.yasb-bar {
	padding: 0;
	margin: 0;
}
.widget {
    padding: 0 2px;
    margin: 0 2px;
    border-radius: 12px;
}
.widget .icon {
    font-size: 18px;
}
.widget .label {
    color: var(--text);
}
/*HOME WIDGET*/
.home-widget {
    background-color: var(--surface1);
    padding-right: 7px;
    padding-left: 7px;
    padding-bottom: 1px;
}
/*HOME WIDGET DROPDOWN*/
.home-menu {
    background-color: var(--mantle);
    border-radius: 8px;
    padding: 0;
    margin-left: 0px;
}
.home-menu .menu-item {
    padding: 6px 48px 7px 16px;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    ; 
    font-weight: 600;
}
.home-menu .menu-item:hover {
    background-color:rgba(128, 130, 158, 0.15);
    color: #fff;
}
.home-menu .separator {
    max-height: 1px;
    background-color:rgba(128, 130, 158, 0.3);
}
/*KOMOREBI WORKSPACES WIDGET*/
.komorebi-workspaces {
    background-color: var(--surface1);
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 6px;
    padding-left: 6px;
}
.komorebi-workspaces .offline-status {
    color: #627199;
    font-size: 12px;
    padding: 0 4px;
    font-weight: 600;
}
.komorebi-workspaces .ws-btn {
    border: none;
    background-color: var(--overlay2);
    margin: 0px 4px;
    padding: 0;
    color: rgba(0, 0, 0, 0);
    border-radius: 5px;
    height: 10px;
    width: 10px;
}
.komorebi-workspaces .ws-btn.populated {
    background-color: var(--sky);
}
.komorebi-workspaces .ws-btn.active {
    color: rgba(149, 177, 255, 0);
    background-color: var(--teal);
    width: 36px;
    height: 10px;
    border-radius: 4px;
}
/*WEATHER WIDGET*/
.weather-widget {
    background-color: var(--surface1);
    padding-right: 10px;
}
.weather-widget .icon {
    color: var(--yellow);
    padding: 6px;
}
.weather-widget .label {
    font-size: 14px;
    ;
}
/*ACTIVE WINDOW WIDGET*/
.active-window-widget {
    background-color: var(--surface1);
    padding-right: 10px;
    padding-left: 10px;
}
.active-window-widget .label {
    font-size: 14px;
}
.active-window-widget .icon {
    padding-right: 6px;
    border: none;
}
/*CLOCK - CALENDAR WIDGET*/
.clock-widget {
    background-color: var(--surface1);
    padding-left: 10px;
    padding-right: 10px;
}
.clock-widget .label {
    font-size: 14px;
}
/*CLOCK - CALENDAR WIDGET DROPDOWN*/
.calendar {
    background-color: var(--mantle);
}
.calendar .calendar-table,
.calendar .calendar-table::item {
    background-color: rgba(17, 17, 27, 0);
    color: rgba(162, 177, 196, 0.85);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;  
}
.calendar .calendar-table::item:selected {
    color: rgb(255, 255, 255);
}
.calendar .day-label {
    margin-top: 20px;
}
.calendar .day-label,
.calendar .month-label,
.calendar .date-label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    min-width: 180px;
    max-width: 180px;
}
.calendar .month-label {
    font-weight: normal;
}
.calendar .date-label {
    font-size: 88px;
    font-weight: 900;
    color: rgb(255, 255, 255);
    margin-top: -20px;
}
/*DISK WIDGET*/
.disk-widget {
    padding-right: 7px;
    padding-left: 7px;
    background-color: var(--surface1);
}
/*DISK DROPDOWN*/
.disk-group {
    background-color: var(--mantle);    
}
.disk-group-row {
    min-width: 220px;
    max-width: 220px;
    max-height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(128, 128, 128, 0);
}
.disk-group-row:hover {
    background-color:rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.disk-group-label-bar{
    max-height: 8px;
    border:0px solid rgba(128, 128, 128, 0);
    background-color: rgba(148, 226, 213, 0.3);
    border-radius: 4px;
}
.disk-group-label-bar::chunk{
    background-color: rgba(148, 226, 213, 1);
    border-radius: 4px;
}
.disk-group-label {
    font-size: 13px;
}
.disk-group-label-size {
    font-size: 12px;
    color: rgba(205, 214, 244, 0.5);
}
/*AUDIO WIDGET*/
.volume-widget {
    padding-right: 9px;
    padding-left: 5px;
    background-color: var(--surface1);
}
.volume-widget .icon {
    padding: 0 6px;
    color: var(--teal);
}
.volume-widget .label {
    font-size: 14px;
}
/*AUDIO DROPDOWN*/
.audio-menu {
    background-color: var(--mantle);
}
.audio-container .device {
    font-size: 20px;
    background-color: transparent;
    border: none;
    padding:6px 8px 6px 4px;
    margin: 2px 0;
    font-size: 12px;
    border-radius: 4px;
}
.audio-container .device.selected {
    background-color: rgba(255, 255, 255, 0.085);
}
.audio-container .device:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/*MEDIA WIDGET*/
.media-widget {
	padding: 0;
    padding-right: 10px;
    background-color: var(--surface1);
}
.media-widget .label {
    font-size: 14px;
    padding: 0 0px;
}
.media-widget .btn {
    color: var(--lavender);
}
.media-widget .icon{
    padding: 0 6px;
}
/*WALLPAPERS WIDGET*/
.wallpapers-widget {
    padding-right: 7px;
    padding-left: 7px;
    background-color: var(--surface1);
}
/*WALLPAPERS GALLERY*/
.wallpapers-gallery-window {
    background-color: var(--mantle);
    border: 0;
    margin: 0;
}
.wallpapers-gallery-buttons {
    font-size: 12px;
    font-family: 'Bahnschrift', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-size: 14px;
    padding: 8px 0;
    border-radius: 8px;
    margin:0 8px 8px 8px;
    width: 600px;
}
.wallpapers-gallery-buttons:hover {
    background-color:rgba(255, 255, 255, 0.1)
}
.wallpapers-gallery-image {
    border: 4px solid transparent;
    border-radius: 10px;
}
.wallpapers-gallery-image:hover {
    border: 4px solid rgb(66, 68, 83);
}
.wallpapers-gallery-image.focused {
    border: 4px solid #89b4fa;
}
/*POWER WIDGET*/
.power-menu-widget {
    padding-right: 7px;
    padding-left: 7px;
    background-color: var(--surface1);
}
.power-menu-widget .label {
	color: var(--red);
    font-size: 16px;
}
/*POWER MENU POPUP*/
.uptime {
	font-size: 14px;
	margin-bottom: 10px;
	color: rgba(191, 202, 219, 0.726);
	font-weight: 600;
	font-family: "Bahnschrift", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-popup .button {
	padding: 0;
	width: 160px;
	height: 240px;
	border-radius: 4px;
	background-color: rgba(41, 42, 58, 0.75);
	font-family: "Bahnscrift", Tahoma, Geneva, Verdana, sans-serif;
	color: white;
	border: 4px solid rgba(255, 255, 255, 0);
 
}
.power-menu-popup .button.hover {
	background-color: rgb(55, 56, 75);
	border: 4px solid rgb(55, 56, 75);
}
.power-menu-popup .button .label {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	font-family: "Bahnschrift", Tahoma, Geneva, Verdana, sans-serif;
}
.power-menu-popup .button .icon {
	font-size: 64px;
	padding-top: 54px;
	color: rgba(255, 255, 255, 0.25);
}
.power-menu-popup .button.cancel .icon {
	color: rgba(243, 139, 168, 0.55);
}
.power-menu-popup .button.cancel .label {
	color: rgba(243, 139, 168, 0.95);
}
.cava-widget {
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--surface1);
}
/*GITHUB DROPDOWN*/
.github-widget {
    padding-right: 7px;
    padding-left: 7px;
    background-color: var(--surface1);
}
.github-widget .icon {
    font-size: 16px;
}
.github-menu    {
    background-color:  rgba(17, 17, 27, 0.2);
    max-height: 500px;
    min-height: 500px;
    min-width: 420px;
}
.github-menu .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 8px;
    color: white;
    background-color: rgba(17, 17, 27, 0.75);
}
.github-menu .footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    padding: 4px 8px 6px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #9399b2;
    background-color: rgba(17, 17, 27, 0.75);
}
.github-menu .contents {
    background-color:  rgba(17, 17, 27, 0.2);
}
.github-menu .contents .item {
    min-height: 40px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.github-menu .contents .item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.github-menu .contents .item .title,
.github-menu .contents .item .description {
    color: #9399b2;
    font-family: Segoe UI;
}
.github-menu .contents .item .title {
    font-size: 14px;
    font-weight: 600; 
}
.github-menu .contents .item .description {
    font-size: 12px;
    font-weight: 500
}
.github-menu .contents .item.new .title,
.github-menu .contents .item.new .description {
    color: #ffffff
}
.github-menu .contents .item .icon {
    font-size: 16px;
    padding-right: 0;
    padding-left: 8px;
    padding-right: 4px;
    color: #9399b2;
}
.github-menu .contents .item.new .icon {
    color: #3fb950;
}

Theme Config

watch_stylesheet: true
watch_config: true
debug: false
komorebi:
  start_command: "komorebic start --whkd"
  stop_command: "komorebic stop --whkd"
  reload_command: "komorebic stop --whkd && komorebic start --whkd"
bars:
  primary-bar:
    enabled: true
    screens: ['*'] 
    class_name: "yasb-bar"
    alignment:
      position: "top"
      center: false
    blur_effect:
      enabled: false
      acrylic: false
      dark_mode: true
      round_corners: false
      border_color: None
    window_flags:
      always_on_top: true
      windows_app_bar: true
      hide_on_fullscreen: true
    dimensions:
      width: "100%"
      height: 28
    padding:
      top: 12
      left: 8
      bottom: 2
      right: 8
    widgets:
      left:
        [
          "home",
          "komorebi_workspaces",
          "active_window",
        ]
      center:
        ["clock"]
      right:
        [
          "cava",
          "media",
          "volume",
          "weather",
          "github",
          "disk",
          "wallpapers",
          "power_menu"
        ]
widgets:
  home:
    type: "yasb.home.HomeWidget"
    options:
      label: "<span>\udb80\udf5c</span>"
      menu_list:
      - { title: "Home", path: "~" }
      - { title: "Downloads", path: "C:\\Users\\elrond\\Downloads"}
      - { title: "Documents", path: "C:\\Users\\elrond\\Documents"}
      - { title: "Pictures", path: "C:\\Users\\elrond\\Pictures"}
      - { title: "Videos", path: "C:\\Users\\elrond\\Videos"}
      system_menu: true
      power_menu: false
      blur: true
      round_corners: true
      round_corners_type: "normal"
      border_color: ""
      distance: 10
      container_padding: 
        top: 0
        left: 0
        bottom: 0
        right: 0
      alignment: "left"
      direction: "down"
      menu_labels:
        shutdown: "Shutdown"
        restart: "Restart"
        logout: "Logout"
        lock: "Lock"
        sleep: "Sleep"
        system: "System Settings"
        about: "About This PC"
        task_manager: "Task Manager"
  komorebi_workspaces:
    type: "komorebi.workspaces.WorkspaceWidget"
    options:
        label_offline: "\u26a1 Offline"
        label_workspace_btn: ""
        label_workspace_active_btn: ""
        label_workspace_populated_btn: ""
        label_default_name: "{index}"
        label_zero_index: false
        hide_empty_workspaces: false
        hide_if_offline: false
        animation: true
  weather:
    type: "yasb.weather.WeatherWidget"
    options:
      label: "<span>{icon}</span> {temp}"
      label_alt: "<span>{icon}</span> {location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}"
      api_key: 'EnterYourAPIKeyHere'
      update_interval: 600 #Update interval in seconds, Min 600
      hide_decimal: true
      location: 'EnterYourLocationHere'
      callbacks:
        on_left: "toggle_label"
      icons:
        sunnyDay: "\udb81\udd99"
        clearNight: "\udb81\udd99"
        cloudyDay: "\udb81\udd99"
        cloudyNight: "\udb81\udd99"
        rainyDay: "\udb81\udd99"
        rainyNight: "\udb81\udd99"
        snowyIcyDay: "\udb81\udd99"
        snowyIcyNight: "\udb81\udd99"
        blizzard: "\udb81\udd99"
        default: "\udb81\udd99" 
  media:
      type: "yasb.media.MediaWidget"
      options:
        label: "{title}"
        label_alt: "{artist}"
        max_field_size:
          label: 25
          label_alt: 25
        show_thumbnail: false
        controls_only: false
        controls_left: true
        hide_empty: true
        thumbnail_alpha: 250
        thumbnail_padding: 8
        thumbnail_corner_radius: 0
        icons:
          prev_track: ""
          next_track: ""
          play: "<span>\uf001</span>"
          pause: "<span>\uf001</span>"
  active_window:
    type: "yasb.active_window.ActiveWindowWidget"
    options:
      label: "{win[title]}"
      label_alt: "[class_name='{win[class_name]}' exe='{win[process][name]}' hwnd={win[hwnd]}]"
      label_no_window: ""
      label_icon: true
      label_icon_size: 14
      max_length: 36
      max_length_ellipsis: "..."
      monitor_exclusive: true
  volume:
    type: "yasb.volume.VolumeWidget"
    options:
      label: "<span>{icon}</span> {level}"
      label_alt: "{volume}"
      volume_icons:
        - "\ueee8"  # Icon for muted
        - "\uf026"  # Icon for 0-10% volume
        - "\uf027"  # Icon for 11-30% volume
        - "\uf027"  # Icon for 31-60% volume
        - "\uf028"  # Icon for 61-100% volume
      callbacks:
        on_right: "exec cmd.exe /c start ms-settings:sound"
  clock:
    type: "yasb.clock.ClockWidget"
    options:
      label: "{%a %b %d %H:%M}"
      label_alt: "{%A, %d %B %Y %H:%M}"
      timezones: []
      calendar:
        alignment: "center"
  disk:
    type: "yasb.disk.DiskWidget"
    options:
        label: "<span>\uf473</span>"
        label_alt: "<span>\uf473</span>"
        update_interval: 60
        group_label:
          volume_labels: ["C", "D", "E", "F"]
          show_label_name: false
          blur: True
          round_corners: True
          round_corners_type: "small"
          border_color: "System"
          alignment: "right"
          direction: "down"
          distance: 6
        callbacks:
          on_left: "toggle_group"
          on_middle: "toggle_label"
          on_right: "exec explorer C:\\" # Open disk C in file explorer
  wallpapers:
    type: "yasb.wallpapers.WallpapersWidget"
    options:
      label: "<span>\udb83\ude09</span>"
      image_path: "C:\\Users\\elrond\\.config\\Wallpapers"
      change_automatically: false
      update_interval: 60
      gallery:
        enabled: true
        blur: true
        image_width: 296
        image_per_page: 6
        show_buttons: true
        orientation: "portrait"
        image_spacing: 10
        lazy_load: true
        lazy_load_delay: 10
        lazy_load_fadein: 200
        image_corner_radius: 20
        enable_cache: true
  power_menu:
      type: "yasb.power_menu.PowerMenuWidget"
      options:
        label: "\uf011"
        uptime: True
        blur: False
        blur_background: True
        animation_duration: 250 # Milisecond 
        button_row: 5 # Number of buttons in row, min 1 max 5
        buttons:
          signout: ["\udb80\udf43","Sign out"]
          shutdown: ["\uf011","Shut Down"]
          restart: ["\uead2","Restart"]
          hibernate: ["\uf28e","Hibernate"]
          cancel: ["\udb81\udf3a","Cancel"]
  cava:
    type: "yasb.cava.CavaWidget"
    options:
      bar_height: 12
      gradient: 1
      reverse: 0
      sensitivity: 100
      foreground: "#89b4fa"
      gradient_color_1: '#74c7ec'
      gradient_color_2: '#89b4fa'
      gradient_color_3: '#cba6f7'
      bars_number: 8
      bar_spacing: 2
      bar_width: 4
      sleep_timer: 0
      hide_empty: true
      container_padding:
        top: 0
        left: 0
        bottom: 0
        right: 0
  github:
    type: "yasb.github.GithubWidget"
    options:
      label: "<span>\ueba1</span>"
      label_alt: "Notifications {data}" # {data} return number of unread notification
      token: env # GitHub Personal access tokens (classic) https://github.com/settings/tokens
      max_notification: 20 # Max number of notification displaying in menu max: 50
      only_unread: false # Show only unread or all notifications; 
      max_field_size: 54 # Max characters in title before truncation.
      update_interval: 300 # Check for new notification in seconds
      menu:
        blur: True # Enable blur effect for the menu
        round_corners: True # Enable round corners for the menu (this option is not supported on Windows 10)
        round_corners_type: "normal" # Set the type of round corners for the menu (normal, small) (this option is not supported on Windows 10)
        border_color: "System" # Set the border color for the menu (this option is not supported on Windows 10)
        alignment: "right"
        direction: "down"
        distance: 6

Readme

## Simple Floating Widgets Theme

![Image](https://i.imgur.com/qiEXutY.png)

Simple theme that supports komorebi. If you are going to use this theme, please set your wallpapers location, weather api and location, github token (as an env. variable or directly into the config), and also install cava (winget install karlstav.cava).

Also you can always customize the theme as you want.

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-51 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.