diff --git a/themes/83124e1d-7df8-4494-b901-d60a78074e56/config.yaml b/themes/83124e1d-7df8-4494-b901-d60a78074e56/config.yaml new file mode 100644 index 0000000..1d02882 --- /dev/null +++ b/themes/83124e1d-7df8-4494-b901-d60a78074e56/config.yaml @@ -0,0 +1,242 @@ +watch_stylesheet: true +watch_config: true +debug: false +update_check: true +komorebi: + start_command: "komorebic start --whkd" + stop_command: "komorebic stop --whkd" + reload_command: "komorebic reload-configuration" +bars: + primary-bar: + enabled: true + screens: ['*'] + class_name: "yasb-bar" + alignment: + position: "top" + align: "center" + 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: "99%" + height: 32 + padding: + top: 10 + left: 0 + bottom: 1 + right: 10 + widgets: + left: + - "komorebi_active_layout" + - "komorebi_workspaces" + - "notifications" + - "komorebi_stack" + - "media" + center: + - "active_window" + right: + - "apps" + - "volume" + - "clock" +widgets: + komorebi_stack: + type: "komorebi.stack.StackWidget" + options: + label_offline: "" + label_window: "" + label_window_active: "" + label_no_window: "" + label_zero_index: false + show_icons: "always" + icon_size: 19 + max_length: 10 + max_length_active: 20 + max_length_ellipsis: ".." + hide_if_offline: false + show_only_stack: false + animation: true + enable_scroll_switching : true + +komorebi_active_layout: + type: "komorebi.active_layout.ActiveLayoutWidget" + options: + hide_if_offline: false + label: "{icon}" + layouts: + - 'bsp' + - 'columns' + - 'rows' + - 'grid' + - 'scrolling' + - 'vertical_stack' + - 'horizontal_stack' + - 'ultrawide_vertical_stack' + - 'right_main_vertical_stack' + layout_icons: + bsp: "" + columns: "" + rows: "" + grid: "" + scrolling: "" + vertical_stack: "" + horizontal_stack: "" + ultrawide_vertical_stack: "" + right_main_vertical_stack: "" + monocle: "" + maximized: "" + floating: "" + paused: "\udb83\udf89" + tiling: "\udb81\ude40" + callbacks: + on_left: 'toggle_layout_menu' + on_middle: 'next_layout' + on_right: 'prev_layout' + layout_menu: + blur: false + round_corners: true + round_corners_type: "normal" + border_color: "System" + alignment: "left" + direction: "down" + offset_top: 10 + offset_left: 0 + show_layout_icons: true + container_padding: + top: 0 + left: 0 + bottom: 0 + right: 0 + apps: + type: "yasb.applications.ApplicationsWidget" + options: + label: "{data}" + app_list: + - {icon: "", launch: "taskmgr", name: "Task Manager"} + - {icon: "", launch: "quick_settings",name: "Quick Settings"} + - {icon: "", launch: "search", name: "Search"} + - {icon: "", launch: "control", name: "Control Panel"} + - {icon: "", launch: "ncpa.cpl", name: "Network Settings"} + - {icon: "", launch: "notification_center", name: "Notification Center"} + komorebi_workspaces: + type: "komorebi.workspaces.WorkspaceWidget" + options: + label_offline: "Komorebi OFFLINE" + label_workspace_btn: "{index}" + label_workspace_active_btn: "{index}" + label_workspace_populated_btn: "{index}" + label_default_name: "" + label_zero_index: false + hide_empty_workspaces: false + hide_if_offline: true + active_window: + type: "yasb.active_window.ActiveWindowWidget" + options: + label: "{win[title]}" + label_alt: "{win[title]}" + label_no_window: "" + label_icon: true + label_icon_size: 22 + max_length: 100 + max_length_ellipsis: "..." + monitor_exclusive: false + volume: + type: "yasb.volume.VolumeWidget" + options: + tooltip: false + label: "{icon} {level}" + volume_icons: + - "󰝟" # Icon for muted + - "󰕿" # Icon for 0-10% volume + - "󰖀" # Icon for 11-30% volume + - "󰕾" # Icon for 31-60% volume + - "󰕾" # Icon for 61-100% volume + audio_menu: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "none" + alignment: "right" + offset_top: 16 + offset_left: -5 + direction: "down" + clock: + type: "yasb.clock.ClockWidget" + options: + label: "{%A, %b %d %Y %I:%M %p}" + label_alt: "{%I:%M %p}" + tooltip: false + callbacks: + on_left: "toggle_calendar" + on_right: "toggle_label" + media: + type: "yasb.media.MediaWidget" + options: + label: "{artist} - {title}" + label_alt: "{artist}" + callbacks: + on_left: "toggle_media_menu" + on_middle: "do_nothing" + on_right: "toggle_label" + max_field_size: + label: 100 + label_alt: 100 + show_thumbnail: false + controls_left: false + controls_hide: false + hide_empty: true + thumbnail_alpha: 80 + thumbnail_padding: 10 + thumbnail_corner_radius: 0 + scrolling_label: + enabled: true + update_interval_ms: 33 + ease_slope: 20 + ease_pos: 0.8 + ease_min: 0.5 + icons: + prev_track: "" + next_track: "" + play: "" + pause: "" + media_menu: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "left" + direction: "down" + offset_top: 16 + offset_left: 1 + thumbnail_corner_radius: 6 + thumbnail_size: 150 + max_title_size: 45 + max_artist_size: 40 + show_source: true + media_menu_icons: + play: "" + pause: "" + prev_track: "" + next_track: "" + notifications: + type: "yasb.notifications.NotificationsWidget" + options: + class_name: "notify" + label: "" + label_alt: "" + hide_empty: true + tooltip: false + container_padding: + top: 0 + left: 10 + bottom: 0 + right: 4 + callbacks: + on_left: "toggle_notification" + on_right: "toggle_label" diff --git a/themes/83124e1d-7df8-4494-b901-d60a78074e56/image.png b/themes/83124e1d-7df8-4494-b901-d60a78074e56/image.png new file mode 100644 index 0000000..d8aa44b Binary files /dev/null and b/themes/83124e1d-7df8-4494-b901-d60a78074e56/image.png differ diff --git a/themes/83124e1d-7df8-4494-b901-d60a78074e56/readme.md b/themes/83124e1d-7df8-4494-b901-d60a78074e56/readme.md new file mode 100644 index 0000000..fce409c --- /dev/null +++ b/themes/83124e1d-7df8-4494-b901-d60a78074e56/readme.md @@ -0,0 +1,7 @@ +## Init Light +A rounded, boxy and light theme for Yasb. Just a minimal theme with focus on separation of utilities in the topbar and apps in the dock. + +This theme uses a combination of Segoe UI, Segoe UI Fluent Icons and Material Symbols Rounded (which can be found in the fonts directory). + + + diff --git a/themes/83124e1d-7df8-4494-b901-d60a78074e56/styles.css b/themes/83124e1d-7df8-4494-b901-d60a78074e56/styles.css new file mode 100644 index 0000000..0ca2a47 --- /dev/null +++ b/themes/83124e1d-7df8-4494-b901-d60a78074e56/styles.css @@ -0,0 +1,472 @@ +/*GENERAL CONFIGRATIONS*/ +:root { + --bg-light: #e5e7eb; + --bg-light-hover: #d1d5db; + --bg-light-transparent: #e5e7eb71; + --text-dark: #18181b; + --text-gray: #59595f; + --text-gray-light: #4e525c; + --text-white: #ffffff; + --accent-blue: #0176a3; + --accent-blue-dark: #0078d4; + --accent-orange: #ff583b; + --accent-green: #199143; + --source-bg-default: #bac2de; + --slider-groove: #d9dbdf; + --slider-groove-hover: #a3a3a3; + --separator-color: #b8b7b7; + --notification-badge-bg: #18181b; + --notification-badge-text: #f9f9f9; +} +.widget .icon { + font-size: 16px; +} +/*KOMOREBI LAYOUT*/ +.komorebi-active-layout .label { + background-color: var(--bg-light); + color: var(--text-dark); + font-family: "Material Symbols Rounded"; + font-size: 18.6667px; + font-weight: 450; + padding-right: 12px; + padding-left: 10px; + border-radius: 12px; + margin-left: 8px; + width: 20px; +} +.komorebi-layout-menu { + background-color: var(--bg-light); + color: var(--text-gray); + border-radius: 12px; + margin-left: 8px; + margin-top: 4px; +} +.komorebi-layout-menu:hover { + background-color: var(--bg-light-hover); + color: var(--text-dark); +} +.komorebi-layout-menu .menu-item { + padding: 8px 16px; + margin-top: 4px; + margin-left: 8px; + font-size: 16px; + color: var(--text-gray); +} +.komorebi-layout-menu .menu-item-icon { + font-family: "Material Symbols Rounded"; + color: var(--text-gray); + font-size: 18px; +} +.komorebi-layout-menu .menu-item-icon:hover { + color: var(--accent-blue); +} +.komorebi-layout-menu .menu-item-text { + font-family: "Segoe UI Semibold"; + padding-left: 4px; + font-size: 16px; + font-weight: bold; +} +.komorebi-layout-menu .menu-item-text:hover { + color: var(--accent-blue); +} +.komorebi-layout-menu .separator { + max-height: 1px; + background-color: var(--separator-color); +} +/*KOMOREBI-WORKSPACES*/ +.komorebi-workspaces { + font-family: "Material Symbols Rounded"; + background-color: transparent; + margin: 0 24px -2px 8px; + padding: 0 0 0 0; + border-radius: 6px; +} +.komorebi-workspaces .offline-status { + color: var(--bg-light-transparent); + font-size: 14px; + padding: 0 4px; + font-weight: bold; +} +.komorebi-workspaces .ws-btn { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; + border: none; + width:0; + height:0; + font-size:22.6667px; +} +.komorebi-workspaces .ws-btn.populated { + width:0; + height:0; +} +.komorebi-workspaces .ws-btn.active { + font-weight:400; + background-color: var(--bg-light); + color: var(--text-dark); + margin: 0 4px 2px 2px; + border-radius: 12px; + padding: 6px 6px 6px 5px; + height: 24px; + width: 31px; +} +.komorebi-workspaces .ws-btn.button-1 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +.komorebi-workspaces .ws-btn.button-2 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +.komorebi-workspaces .ws-btn.button-3 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +.komorebi-workspaces .ws-btn.button-4 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +.komorebi-workspaces .ws-btn.button-5 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +.komorebi-workspaces .ws-btn.button-6 { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; +} +/*ACTIVE WINDOW*/ +.active-window-widget { + background-color: var(--bg-light); + padding-right: 20px; + padding-left: 20px; + border-radius: 12px; +} +.active-window-widget .label { + color: #000000; + font-family: "Segoe UI Semibold"; + font-size: 16px; + font-weight: bold; +} +.active-window-widget .icon{ + padding-right:10px; +} +/*AUDIO WIDGET*/ +.volume-widget { + margin-right: 8px; + padding-right: 15px; + padding-left: 12px; + background-color: var(--bg-light); + color:var(--text-dark); + border-radius: 12px; +} +.volume-widget .icon { + min-width:20px; + font-family: "Segoe Fluent Icons"; + color: var(--text-dark); + font-size: 20px; + padding: 3px 0 0 0; + font-weight: bold; +} +.volume-widget .label { + font-family: "Segoe UI Semibold"; + font-size: 16px; + font-weight: bold; + padding-left: 5px; + color: var(--text-dark); +} +/*AUDIO DROPDOWN*/ +.audio-menu { + background-color:var(--bg-light); + color: var(--text-dark); + border-radius:12px; +} +.audio-container .device { + font-family: "Segoe UI Semibold"; + font-weight: bold; + background-color:var(--bg-light); + color: var(--text-dark); + border: none; + padding: 10px 8px 6px 4px; + margin: 2px 0; + font-size: 16px; + border-radius: 12px; +} +.audio-container .device.selected { + background-color: var(--bg-light); + color: var(--text-dark); +} +/*CLOCK / CALENDAR WIDGET*/ +.clock-widget { + background-color: var(--bg-light); + color: var(--text-dark); + padding-left: 18px; + padding-right: 18px; + margin-right: 2px; + margin-left: 2px; + border-radius: 12px; +} +.clock-widget .label { + background-color: var(--bg-light); + color: var(--text-dark); + font-family: "Segoe UI Semibold"; + font-size: 16px; + font-weight: bold; +} +.calendar { + background-color: var(--bg-light); + color: var(--text-dark); +} +.calendar .calendar-table,.calendar .calendar-table .item { + background-color: var(--bg-light); + color: var(--text-dark); + font-family: "Segoe UI Semibold"; + font-weight: bold; + margin: 0; + padding: 0; + outline: none; + font-size: 16px; +} +.calendar .calendar-table .item.selected { + color: var(--bg-light); + background-color: var(--text-dark); + border-radius: 6px; +} +.calendar .day-label { + margin-top: 20px; +} +.calendar .day-label,.calendar .month-label,.calendar .date-label { + font-family: "Segoe UI Semibold"; + font-size: 18px; + color: var(--text-dark); + font-weight: bold; + min-width: 160px; + max-width: 160px; +} +.calendar .month-label { + font-size: 16px; +} +.calendar .date-label { + font-size: 88px; + font-weight: 900; + margin-top: -20px; +} +/*MEDIA WIDGET*/ +.media-widget { + background-color: var(--bg-light); + border-radius: 12px; + padding-left: 12px; + padding-right: 10 px; + margin-right: 10px; + min-width: 400px; +} +.media-widget .label { + color: var(--text-dark); + background-color: var(--bg-light); + padding: 0 0 0 8px; + font-family: "Segoe UI Semibold"; + font-size: 16px; + font-weight: bold; + min-width: 300px; +} +.media-widget .btn { + font-family: "Material Symbols Rounded"; + color: var(--text-dark); + font-weight: 600; + font-size: 19px; + padding: 0 10px; +} +.media-widget .btn:hover,.media-widget .btn.play:hover { + color: var(--accent-blue); +} +.media-widget .btn.play { + background-color: var(--bg-light); + border-radius: 6px; + padding:0 4px; +} +.media-widget .btn.prev { + padding-right:1px; +} +.media-widget .btn.next { + padding-left: 2px; +} +.media-widget .btn.disabled:hover,.media-widget .btn.disabled { + font-family: "Segoe Variable Display"; + color: var(--text-dark); + font-size: 19px; + background-color: var(--bg-light); +} +/*MEDIA POPUP*/ +.media-menu { + background-color: var(--bg-light); + border-radius: 12px; + min-height: 200px; + min-width: 500px; +} +.media-menu .title{ + margin-left:20px; + margin-right:20px; +} +.media-menu .artist { + margin-left:21px; + margin-right:20px; +} +.media-menu .title, +.media-menu .source { + font-weight: bold; + font-family: "Segoe UI Bold"; + padding-bottom:10px; + color: var(--text-dark); +} +.media-menu .title { + font-size: 22px; + padding-top:18px; + letter-spacing:1px; +} +.media-menu .artist { + font-family: "Segoe UI Semibold"; + font-size: 18px; + color: var(--text-dark); + padding-bottom: 10px; + padding-top:5px; +} +.media-menu .source { + color:transparent; +} +.media-menu .btn { + font-family: "Material Symbols Rounded"; + min-width: 18px; + color: var(--text-dark); +} +.media-menu .btn.prev { + padding-left:18px; + font-size: 38px; + font-weight:300; +} +.media-menu .btn.play { + font-size: 48px; + font-weight: 300; +} +.media-menu .btn.pause { + font-size: 48px; + font-weight: 300; +} +.media-menu .btn.next { + font-size: 38px; + font-weight: 300; +} +.media-menu .btn:hover { + color: var(--text-dark); + background-color: transparent; +} +.media-menu .btn.disabled:hover, +.media-menu .btn.disabled { + color: var(--text-gray-light); + background-color: rgba(0,0,0,0); +} +.media-menu .playback-time { + font-size: 16px; + font-family: "Segoe UI Semibold"; + font-weight: bold; + color: var(--text-dark); + min-width: 100px; + margin-top:4px; + margin-bottom:10px; + border-radius:4px; +} +.media-menu .progress-slider { + height: 8px; + border-radius: 4px; + padding-bottom:16px; +} +.media-menu .progress-slider::groove { + background: var(--slider-groove); + height: 8px; + border-radius: 4px; +} +.media-menu .progress-slider::groove:hover { + height: 8px; + background: var(--slider-groove-hover); + border-radius: 4px; +} +.media-menu .progress-slider::sub-page { + background: var(--accent-blue-dark); + border-radius: 4px; + height: 8px; +} +/*NOTIFICATIONS*/ +.notification-widget { + background-color: var(--bg-light); + margin:0 10px 0 0; + border-radius: 12px; +} +.notification-widget .icon { + font-family: "Material Symbols Rounded"; + qproperty-text: ""; + padding: 2px 8px 0 0; + color: var(--text-dark); + font-size:21.667px; + font-weight:350; +} +.notification-widget .icon.new-notification { + font-size:21.667px; + qproperty-text: ""; + color: var(--text-dark); +} +.notification-widget .label.new-notification { + width:0; + height:0; +} +.notification-widget .label { + color: transparent; + background:transparent; + max-width:0; + padding:0; + margin:0; +} +.notification-widget.notify { + font-family: "Material Symbols Rounded"; +} +.apps-widget { + background-color: var(--bg-light); + color: var(--text-dark); + border-radius: 12px; + padding: 0 5px 0 12px; + margin:0 10px; +} +.apps-widget .widget-container { + padding:0 8px; +} +.apps-widget .widget-container .label { + font-family: "Material Symbols Rounded"; + font-size:18px; + max-width:32px; + min-width:26px; +} + +/* Stack Widget*/ + +.komorebi-stack { + border-radius: 12px; + min-width:40px; + background-color: var(--bg-light-transparent); + color: var(--text-dark); + margin-right:10px; +} +.komorebi-stack .widget-container { + color: var(--text-dark); + border-radius: 12px; +} +.komorebi-stack .window .icon{ + margin-left:4px; + padding:0 10px; +} +.komorebi-stack .window { + background-color: transparent; + border: none; +} +.komorebi-stack .window.active { + background-color: var(--bg-light); + color: var(--text-dark); + border-radius: 12px; + height: auto; + margin: 0; +} diff --git a/themes/83124e1d-7df8-4494-b901-d60a78074e56/theme.json b/themes/83124e1d-7df8-4494-b901-d60a78074e56/theme.json new file mode 100644 index 0000000..ed378ee --- /dev/null +++ b/themes/83124e1d-7df8-4494-b901-d60a78074e56/theme.json @@ -0,0 +1 @@ +{"id": "83124e1d-7df8-4494-b901-d60a78074e56", "name": "Init Light", "description": "A minimal rounded, boxy and light theme for Yasb.", "homepage": "https://github.com/initiateit/Init-Light", "style": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/83124e1d-7df8-4494-b901-d60a78074e56/styles.css", "config": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/83124e1d-7df8-4494-b901-d60a78074e56/config.yaml", "readme": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/83124e1d-7df8-4494-b901-d60a78074e56/readme.md", "image": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/83124e1d-7df8-4494-b901-d60a78074e56/image.png", "author": "initiateit", "publish_date": "2026-01-28T03:36:04.345476"} \ No newline at end of file