diff --git a/themes/80198c48-f70a-44a1-8507-ce300ff8e360/config.yaml b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/config.yaml new file mode 100644 index 0000000..49363bc --- /dev/null +++ b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/config.yaml @@ -0,0 +1,412 @@ +watch_stylesheet: true +watch_config: true +debug: false + +bars: + status-bar: + enabled: true + screens: ['*'] + class_name: "yasb-bar" + animation: + enabled: true + duration: 400 + alignment: + position: "top" + center: true + blur_effect: + enabled: true + acrylic: true + dark_mode: true + round_corners: false + border_color: None + window_flags: + always_on_top: false + windows_app_bar: true + dimensions: + width: "100%" + height: 40 + padding: + top: 0 + left: 0 + bottom: 0 + right: 0 + widgets: + left: + [ + # "task_view", # If desired, you can replace the "task_view" and "home" widgets. + "home", + "windows_workspaces", + "taskbar", + "media" + ] + center: + [ + "clock" + ] + right: + [ + "cpu", + "gpu", + "memory", + "traffic", + "volume", + "microphone", + "disk", + "apps", + "power_menu" + ] + +widgets: + # task_view: + # type: "yasb.custom.CustomWidget" + # options: + # label: "\ue62a" + # label_alt: "\ue62a" + # class_name: "task-view-widget" + # callbacks: + # on_left: "exec explorer.exe shell:::{3080F90E-D7AD-11D9-BD98-0000947B0257}" + # on_middle: "do_nothing" + # on_right: "do_nothing" + + home: + type: "yasb.home.HomeWidget" + options: + label: "\ue62a" + system_menu: true + power_menu: true + blur: true + border_color: "system" + round_corners_type: "normal" + menu_labels: + about: "\ue66A About This PC" + system: "\uF423 System Settings" + task_manager: "\uf437 Task Manager" + hibernate: "\uf28e Hibernate" + sleep: "\u23fe Sleep" + restart: "\uead2 Restart" + shutdown: "\uf011 Shutdown" + lock: "\uea75 Lock" + logout: "\udb80\udf43 Logout" + menu_list: + - { title: "\uE617 User Home", path: "~" } + - { title: "\udb80\udd20 Download", path: "~\\Downloads" } + - { title: "\udb80\ude1a Documents", path: "~\\Documents" } + - { title: "\uf03e Pictures", path: "~\\Pictures" } + + windows_workspaces: + type: "yasb.windows_desktops.WorkspaceWidget" + options: + label_workspace_btn: "\udb81\udc3d" + label_workspace_active_btn: "\udb81\udc3e" + btn_shadow: + enabled: true + color: "black" + radius: 3 + offset: [ 1, 1 ] + + taskbar: + type: "yasb.taskbar.TaskbarWidget" + options: + icon_size: 16 + animation: + enabled: true + preview: + enabled: true + width: 250 + delay: 400 + padding: 12 + callbacks: + on_middle: "close_app" + + media: + type: "yasb.media.MediaWidget" + options: + label: "\udb80\udf87 {title}" + label_alt: "\udb80\udf87 {title} - {artist}" + hide_empty: true + callbacks: + on_left: "toggle_media_menu" + on_middle: "do_nothing" + on_right: "toggle_label" + max_field_size: + label: 45 + label_alt: 80 + show_thumbnail: false + controls_only: false + controls_left: false + thumbnail_alpha: 80 + thumbnail_padding: 8 + thumbnail_corner_radius: 16 + icons: + prev_track: "\udb81\udcae" + next_track: "\udb81\udcad" + play: "\udb81\udc0a" + pause: "\udb80\udfe4" + media_menu: + blur: true + round_corners: true + round_corners_type: "normal" + alignment: "right" + direction: "down" + offset_top: 6 + offset_left: 10 + thumbnail_corner_radius: 8 + thumbnail_size: 120 + max_title_size: 80 + max_artist_size: 20 + show_source: true + media_menu_icons: + play: "\ue768" + pause: "\ue769" + prev_track: "\ue892" + next_track: "\ue893" + label_shadow: + enabled: true + color: "black" + radius: 3 + offset: [1, 1] + + clock: + type: "yasb.clock.ClockWidget" + options: + label: "\uf017 {%a %d %b %H:%M}" + label_alt: "{%A %d %B %Y %H:%M:%S}" + # locale: 'en_EN' # Language for date, you can set your own, example fr_FR + timezones: [] # Looking up time zone info from registry + # timezones: ["America/Montreal"] + calendar: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "center" + direction: "down" + show_holidays: true + show_week_numbers: true + holiday_color: "#FF6464" + + cpu: + type: "yasb.cpu.CpuWidget" + options: + label: "\ueea1 {info[percent][total]}%" + label_alt: "\ueea1 {info[histograms][cpu_percent]}" + update_interval: 1000 + histogram_icons: + - "\u2581" # 0% + - "\u2581" # 10% + - "\u2582" # 20% + - "\u2583" # 30% + - "\u2584" # 40% + - "\u2585" # 50% + - "\u2586" # 60% + - "\u2587" # 70% + - "\u2588" # 80%+ + histogram_num_columns: 8 + callbacks: + on_left: "do_nothing" + on_middle: "exec cmd /c Taskmgr" + on_right: "toggle_label" + container_padding: + top: 0 + left: 0 + bottom: 0 + right: 0 + label_shadow: + enabled: false + color: "black" + radius: 5 + offset: [ 0, 0 ] + + gpu: + type: "yasb.gpu.GpuWidget" + options: + label: "\uf4bc {info[temp]}°C" + label_alt: "\uf4bc {info[temp]}°C | {info[mem_used]} / {info[mem_total]}" + update_interval: 2000 + gpu_thresholds: + low: 25 + medium: 50 + high: 90 + histogram_icons: + - "\u2581" # 0% + - "\u2581" # 10% + - "\u2582" # 20% + - "\u2583" # 30% + - "\u2584" # 40% + - "\u2585" # 50% + - "\u2586" # 60% + - "\u2587" # 70% + - "\u2588" # 80%+ + histogram_num_columns: 8 + callbacks: + on_left: "do_nothing" + on_middle: "exec cmd /c Taskmgr" + on_right: "toggle_label" + + memory: + type: "yasb.memory.MemoryWidget" + options: + label: "\uefc5 {virtual_mem_used} / {virtual_mem_total}" + label_alt: "\uf4bc VIRT: {virtual_mem_percent}% SWAP: {swap_mem_percent}%" + update_interval: 5000 + callbacks: + on_left: "do_nothing" + on_middle: "exec cmd /c Taskmgr" + on_right: "toggle_label" + memory_thresholds: + low: 25 + medium: 50 + high: 90 + histogram_icons: + - "\u2581" # 0% + - "\u2581" # 10% + - "\u2582" # 20% + - "\u2583" # 30% + - "\u2584" # 40% + - "\u2585" # 50% + - "\u2586" # 60% + - "\u2587" # 70% + - "\u2588" # 80%+ + label_shadow: + enabled: true + color: "black" + radius: 3 + offset: [ 1, 1 ] + + traffic: + type: "yasb.traffic.TrafficWidget" + options: + label: "\uea9a {download_speed}{upload_speed} \ueaa1" + label_alt: "\uea9a {download_speed}{upload_speed} \ueaa1" + update_interval: 1000 + hide_if_offline: true + speed_unit: "bytes" + max_label_length_align: "center" + menu: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "center" + direction: "down" + callbacks: + on_left: "toggle_menu" + on_middle: "exec cmd.exe /c start ms-settings:network-status" + on_right: "do_nothing" + label_shadow: + enabled: false + color: "black" + radius: 3 + offset: [ 1, 1 ] + + volume: + type: "yasb.volume.VolumeWidget" + options: + label: "{icon} {level}" + label_alt: "{volume}" + mute_text: "Mute" + volume_icons: + - "\ue74f" # Icon for muted + - "\ue992" # Icon for 0-10% volume + - "\ue993" # Icon for 11-30% volume + - "\ue994" # Icon for 31-60% volume + - "\ue995" # Icon for 61-100% volume + callbacks: + on_left: "toggle_volume_menu" + on_middle: "exec cmd.exe /c start ms-settings:sound" + on_right: "toggle_mute" + audio_menu: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "center" + direction: "down" + + microphone: + type: "yasb.microphone.MicrophoneWidget" + options: + label: "{icon} {level}" + label_alt: "{icon}" + mute_text: "Mute" + icons: + normal: "\ue720" + muted: "\uf12e" + 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: "exec cmd.exe /c start ms-settings:sound" + on_right: "toggle_mute" + label_shadow: + enabled: true + color: "black" + radius: 3 + offset: [ 1, 1 ] + + disk: + type: "yasb.disk.DiskWidget" + options: + label: "\uf473 Disks" + label_alt: "\uf473 {volume_label} {space[used][gb]} / {space[total][gb]}" + volume_label: "C" + decimal_display: 1 + update_interval: 60 + group_label: + volume_labels: ["C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] + show_label_name: true + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "center" + direction: "down" + callbacks: + on_left: "toggle_group" + on_middle: "do_nothing" + on_right: "toggle_label" + disk_thresholds: + low: 25 + medium: 50 + high: 90 + + apps: + type: "yasb.applications.ApplicationsWidget" + options: + label: "{data}" + app_list: + # - { icon: "\uf0a2", launch: "notification_center" } + # - { icon: "\ueb51", launch: "quick_settings" } + - { icon: "\uf46a", launch: "cmd /c start ms-settings:windowsupdate" } + # - { icon: "\uf422", launch: "search" } + - { icon: "\ueb03", launch: "cmd /c Taskmgr", name: "Task Manager" } + - { icon: "\uf489", launch: "wt", name: "Windows Terminal" } + - { icon: "\udb82\ude1e", launch: "cmd /c code", name: "VS Code" } + - { icon: "\uf1b6", launch: "C:/Program Files (x86)/Steam/Steam.exe", name: "Steam" } + container_padding: + top: 0 + left: 8 + bottom: 0 + right: 8 + + power_menu: + type: "yasb.power_menu.PowerMenuWidget" + options: + label: "\ue7e8" + uptime: true + blur: false + blur_background: true + animation_duration: 300 # Milliseconds + button_row: 3 # Number of buttons in row, min 1 max 5 + buttons: + lock: ["\uea75", "Lock"] + signout: ["\udb80\udf43", "Sign out"] + shutdown: ["\uf011", "Shut Down"] + restart: ["\uead2", "Restart"] + hibernate: ["\uf28e", "Hibernate"] + cancel: ["\udb81\udf3a", "Cancel"] diff --git a/themes/80198c48-f70a-44a1-8507-ce300ff8e360/image.png b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/image.png new file mode 100644 index 0000000..2fdf692 Binary files /dev/null and b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/image.png differ diff --git a/themes/80198c48-f70a-44a1-8507-ce300ff8e360/readme.md b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/readme.md new file mode 100644 index 0000000..3f17281 --- /dev/null +++ b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/readme.md @@ -0,0 +1,40 @@ +# Fluent Onyx Theme + +![Theme Overview](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview.png) + +A premium Windows 11 theme for YASB that brings the authentic Fluent Design System experience to your taskbar. Featuring carefully crafted dark aesthetics with acrylic blur effects and the signature Windows 11 color palette. + +Designed specifically for use with native Windows 11 components, Windhawk modifications are not required for maximum convenience. + +## Features + +- **Authentic Fluent Design**: Built with official Windows 11 design tokens and guidelines +- **Acrylic Effects**: Beautiful blur and transparency with proper layering +- **Complete Widget Suite**: Clock with calendar, system monitors (CPU, GPU, memory, disk), network traffic, media player, and more +- **Virtual Desktops**: Windows workspaces integration with rename and management +- **Consistent Styling**: All widgets follow the same design language + +## Installation + +1. **Fonts**: Install `"Segoe UI Variable Display"`, `"JetBrainsMono Nerd Font"` and `"Segoe Fluent Icons"` if you don't have them. + +## Gallery + +![Preview 1](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-01.jpg) + +![Preview 2](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-02.jpg) + +![Preview 3](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-03.jpg) + +![Preview 4](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-04.jpg) + +![Preview 5](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-05.jpg) + +![Preview 6](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-06.jpg) + +![Preview 7](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-07.jpg) + +![Preview 8](https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/raw/master/gallery/preview-08.jpg) + +## Author +[![GitHub](https://img.shields.io/badge/GitHub-Hoxiee-181717?logo=github&style=flat-square)](https://github.com/Hoxiee) diff --git a/themes/80198c48-f70a-44a1-8507-ce300ff8e360/styles.css b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/styles.css new file mode 100644 index 0000000..e9224ad --- /dev/null +++ b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/styles.css @@ -0,0 +1,1133 @@ +/* ============================================================================ + YASB Panel Styles - Windows 11 Fluent Onyx + ============================================================================ */ + +/* ---------------------------------------------------------------------------- + CSS Variables - Windows 11 Design Tokens + ---------------------------------------------------------------------------- */ +:root { + /* Typography */ + --font-primary: "Segoe UI Variable Display", "Segoe UI"; + --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui; + --font-mono: "JetBrainsMono Nerd Font"; + --font-icon: "Segoe Fluent Icons", "JetBrainsMono NFP"; + --font-icon-2: "JetBrainsMono NFP"; + + --font-size-caption: 12px; + --font-size-body: 14px; + --font-size-body-strong: 18px; + --font-size-subtitle: 20px; + --font-size-title: 28px; + + --font-weight-regular: 400; + --font-weight-semibold: 500; + --font-weight-bold: 700; + + /* Windows 11 Dark Theme Colors */ + --color-background-base: rgba(8, 8, 8, 0.6); + --color-background-layer: rgba(44, 44, 44, 0.5); + --color-background-elevated: rgba(44, 44, 44, 0.4); + --color-background-elevated-x2: rgba(44, 44, 44, 0.8); + --color-taskbar: rgba(43, 44, 45, 0.85); + +/* Surface Colors */ + --color-surface-default: rgba(255, 255, 255, 0.0605); + --color-surface-secondary: rgba(255, 255, 255, 0.0419); + --color-surface-tertiary: rgba(255, 255, 255, 0.0326); + --color-surface-disabled: rgba(255, 255, 255, 0.0419); + + /* Text Colors */ + --color-text-primary: rgba(255, 255, 255, 1); + --color-text-secondary: rgba(255, 255, 255, 0.786); + --color-text-tertiary: rgba(255, 255, 255, 0.544); + --color-text-disabled: rgba(255, 255, 255, 0.362); + + /* Accent Colors (Windows Blue) */ + --color-accent-default: #60CDFF; /* Default accent */ + --color-accent-secondary: #0078D4; /* Secondary accent */ + --color-accent-tertiary: rgba(96, 205, 255, 0.5); + --color-accent-disabled: rgba(255, 255, 255, 0.1581); + + /* Semantic Colors */ + --color-success: #6CCB5F; + --color-warning: #FCE100; + --color-error: #FF99A4; + --color-info: #60CDFF; + + /* Interactive States */ + --color-subtle-fill-rest: rgba(255, 255, 255, 0.0605); + --color-subtle-fill-hover: rgba(255, 255, 255, 0.0837); + --color-subtle-fill-pressed: rgba(255, 255, 255, 0.0512); + --color-subtle-fill-disabled: transparent; + + /* Stroke/Border Colors */ + --color-stroke-surface: rgba(255, 255, 255, 0.0698); + --color-stroke-control-default: rgba(255, 255, 255, 0.0838); + --color-stroke-divider: rgba(255, 255, 255, 0.0838); + --color-stroke-focus: rgba(255, 255, 255, 0.1047); + + /* Spacing */ + --space-2: 2px; + --space-4: 4px; + --space-8: 8px; + --space-12: 12px; + --space-16: 16px; + --space-20: 20px; + --space-24: 24px; + --space-32: 32px; + + /* Border Radius */ + --radius-none: 0; + --radius-small: 4px; + --radius-medium: 8px; + --radius-large: 12px; + --radius-circle: 32px; +} + +/* ---------------------------------------------------------------------------- + Global Reset + ---------------------------------------------------------------------------- */ +* { + font-size: var(--font-size-body); + color: var(--color-text-primary); + font-weight: var(--font-weight-regular); + font-family: var(--font-primary); + margin: 0; + padding: 0; +} + +/* ---------------------------------------------------------------------------- + Layout - Taskbar Base + ---------------------------------------------------------------------------- */ +.yasb-bar { + padding: 0 var(--space-4); + margin: 0; + background-color: var(--color-background-base); + border-bottom: 1px solid var(--color-stroke-control-default); +} + +.widget { + padding: 0 var(--space-4); + margin: 0; +} + +.widget .label { + padding: 0 var(--space-4); + font-size: var(--font-size-body); + color: var(--color-text-secondary); +} + +.widget .label.alt { + padding: 0 var(--space-8); +} + +.widget .label:hover { + color: var(--color-text-primary); +} + +.widget .icon { + padding-top: 1px; +} + +.tooltip { + background-color: var(--color-background-elevated-x2); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-8) var(--space-12); + margin-top: var(--space-12); + font-size: var(--font-size-body); + font-family: var(--font-primary); + color: var(--color-text-primary); + font-weight: var(--font-weight-regular); +} + +/* ---------------------------------------------------------------------------- + Context Menu + ---------------------------------------------------------------------------- */ +.context-menu, +.context-menu .menu-checkbox { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-8) 0; + font-family: var(--font-primary); + font-size: var(--font-size-body); + color: var(--color-text-primary); +} + +.context-menu::right-arrow { + width: 8px; + height: 8px; + padding-right: var(--space-24); +} + +.context-menu::item, +.context-menu .menu-checkbox { + background-color: transparent; + padding: var(--space-8) var(--space-12); + margin: var(--space-2) var(--space-8); + border-radius: var(--radius-small); + border: 0; + min-width: 150px; +} + +.context-menu::item:selected, +.context-menu .menu-checkbox:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.context-menu::separator { + height: 1px; + background-color: var(--color-stroke-divider); + margin: var(--space-4) var(--space-8); +} + +.context-menu::item:disabled { + color: var(--color-text-disabled); + background-color: transparent; +} + +.context-menu .menu-checkbox .checkbox { + border: none; + padding: var(--space-8) var(--space-16); + font-size: var(--font-size-body); + margin: 0; + color: var(--color-text-primary); + font-family: var(--font-primary); +} + +.context-menu .submenu::item:disabled { + margin: 0; + padding-left: var(--space-16); +} + +.context-menu .menu-checkbox .checkbox:unchecked { + color: var(--color-text-tertiary); +} + +.context-menu .menu-checkbox .checkbox::indicator { + width: 12px; + height: 12px; + margin-left: 0; + margin-right: var(--space-8); +} + +.context-menu .menu-checkbox .checkbox::indicator:unchecked { + background-color: var(--color-surface-secondary); + border-radius: var(--radius-small); +} + +.context-menu .menu-checkbox .checkbox::indicator:checked { + background-color: var(--color-accent-secondary); + border-radius: var(--radius-small); +} + +.context-menu .menu-checkbox .checkbox:focus { + outline: none; +} + +/* ---------------------------------------------------------------------------- + Common Widget Container + ---------------------------------------------------------------------------- */ +.widget-container { + padding: var(--space-4) var(--space-12); + margin: var(--space-4) 0; + background-color: var(--color-acrylic-default); + border-radius: var(--radius-large); + border: 1px solid var(--color-stroke-control-default); +} + +.widget-container:hover { + background-color: rgba(60, 60, 60, 0.7); + border-color: var(--color-stroke-focus); +} + +/* ---------------------------------------------------------------------------- + Icons + ---------------------------------------------------------------------------- */ +.widget .icon { + font-family: var(--font-icon); + font-size: 16px; + color: var(--color-text-secondary); + margin-right: var(--space-4); +} + +.widget:hover .icon { + color: var(--color-text-primary); +} + +/* ---------------------------------------------------------------------------- + Task View Widget + ---------------------------------------------------------------------------- */ +.task-view-widget .widget-container { + background-color: transparent; + border: 0; +} + +.task-view-widget .icon { + font-family: var(--font-icon-2); + font-size: 18px; + color: var(--color-text-secondary); +} + +.task-view-widget .icon:hover { + color: var(--color-accent-default); +} + +/* ---------------------------------------------------------------------------- + Home Widget + ---------------------------------------------------------------------------- */ +.home-widget .widget-container { + background-color: transparent; + border: 0; +} + +.home-widget .icon { + font-family: var(--font-icon-2); + font-size: 18px; + color: var(--color-text-secondary); +} + +.home-widget .icon:hover { + color: var(--color-accent-default); +} + +.home-menu { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-8) 0; + font-family: var(--font-primary); + font-size: var(--font-size-body); + color: var(--color-text-primary); +} + +.home-menu .menu-item { + background-color: transparent; + padding: var(--space-8) var(--space-12); + margin: var(--space-2) var(--space-8); + border-radius: var(--radius-small); + font-family: var(--font-icon-2); + border: 0; + min-width: 150px; +} + +.home-menu .menu-item:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.home-menu .separator { + height: 1px; + min-height: 1px; + max-height: 1px; + background-color: var(--color-stroke-divider); + margin: var(--space-4) var(--space-8); +} + +/* ---------------------------------------------------------------------------- + Windows Desktops (Virtual Desktops) + ---------------------------------------------------------------------------- */ +.windows-desktops .ws-btn { + color: var(--color-text-tertiary); + background-color: transparent; + border: none; + font-size: var(--font-size-body-strong); + padding: var(--space-2) var(--space-4); + margin: -2 0 0 0; + border-radius: var(--radius-small); + min-width: 20px; +} + +.windows-desktops .ws-btn:hover { + color: var(--color-text-secondary); +} + +.windows-desktops .ws-btn.active { + color: var(--color-accent-default); + font-weight: var(--font-weight-semibold); +} + +.windows-desktops .context-menu { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-4); +} + +.windows-desktops .context-menu .menu-item { + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-small); + color: var(--color-text-secondary); +} + +.windows-desktops .context-menu .menu-item:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.windows-desktops .context-menu .separator { + height: 1px; + background-color: var(--color-stroke-divider); + margin: var(--space-4) 0; +} + +/* Qt-specific Dialog Styles */ +.windows-desktops .rename-dialog { + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-large); +} + +.windows-desktops .rename-dialog QPushButton { + background-color: var(--color-accent-default); + color: var(--color-background-base); + border: none; + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-small); + font-weight: var(--font-weight-semibold); +} + +.windows-desktops .rename-dialog QPushButton:hover { + background-color: var(--color-accent-secondary); +} + +.windows-desktops .rename-dialog QLabel { + color: var(--color-text-primary); + font-size: var(--font-size-body); +} + +.windows-desktops .rename-dialog QLineEdit { + background-color: var(--color-surface-secondary); + border: 1px solid var(--color-stroke-control-default); + border-radius: var(--radius-small); + padding: var(--space-8); + color: var(--color-text-primary); + font-family: var(--font-text); +} + +.windows-desktops .rename-dialog QLineEdit:focus { + border-color: var(--color-accent-default); + outline: none; +} + +/* ---------------------------------------------------------------------------- + Taskbar Widget + ---------------------------------------------------------------------------- */ +.taskbar-widget .app-container { + padding: 0 var(--space-4); + margin: 0 var(--space-2); + border-radius: var(--radius-small); +} + +.taskbar-widget .app-container:hover { + background-color: var(--color-subtle-fill-hover); +} + +.taskbar-widget .app-container.foreground { + background-color: var(--color-subtle-fill-rest); + border-left: 2px solid var(--color-accent-default); +} + +.taskbar-widget .app-container .app-title { + padding-left: var(--space-4); + color: var(--color-text-secondary); + font-size: var(--font-size-body); +} + +.taskbar-widget .app-container.foreground .app-title { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); +} + +.taskbar-preview { + background-color: var(--color-taskbar); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-8); +} + +.taskbar-preview .header { + padding-bottom: 12px; + padding-top: var(--margin-normal); +} + +.taskbar-preview .header .title { + color: var(--text-primary); + font-weight: var(--font-bold); + font-size: var(--font-size-body); +} + +/* ---------------------------------------------------------------------------- + Media Widget + ---------------------------------------------------------------------------- */ +.media-widget .btn { + font-size: 18px; + color: var(--color-text-secondary); + padding: var(--space-4) var(--space-8); + margin: 0 var(--space-2); + background-color: transparent; + border: none; + border-radius: var(--radius-small); +} + +.media-widget .btn:hover { + color: var(--color-text-primary); + background-color: var(--color-subtle-fill-hover); +} + +.media-widget .btn:active { + background-color: var(--color-subtle-fill-pressed); +} + +.media-menu { + min-width: 380px; + max-width: 380px; + border-radius: var(--radius-medium); + padding: var(--space-16); + background-color: var(--color-background-elevated); +} + +.media-menu .title, +.media-menu .artist, +.media-menu .source { + font-family: var(--font-text); + margin-left: var(--space-4); +} + +.media-menu .title { + font-size: var(--font-size-body); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); +} + +.media-menu .artist { + font-size: var(--font-size-caption); + color: var(--color-text-secondary); + margin-top: var(--space-2); + margin-bottom: var(--space-4); +} + +.media-menu .source { + font-size: var(--font-size-caption); + color: var(--color-text-tertiary); +} + +.media-menu .btn { + font-family: var(--font-icon); + font-size: 18px; + margin: var(--space-12) var(--space-4) 0; + min-width: 32px; + max-width: 32px; + min-height: 32px; + max-height: 32px; + border-radius: var(--radius-large); + color: var(--color-text-secondary); + background-color: var(--color-subtle-fill-rest); + border: 1px solid var(--color-stroke-control-default); +} + +.media-menu .btn:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.media-menu .btn.play { + background-color: var(--color-accent-default); + color: var(--color-background-base); + border-color: transparent; +} + +.media-menu .btn.play:hover { + background-color: var(--color-accent-secondary); +} + +.media-menu .btn.disabled, +.media-menu .btn.disabled:hover { + color: var(--color-text-disabled); + background-color: var(--color-surface-disabled); + cursor: not-allowed; +} + +.media-menu .playback-time { + font-size: var(--font-size-caption); + font-family: var(--font-mono); + color: var(--color-text-tertiary); + margin-top: var(--space-16); + min-width: 100px; +} + +.media-menu .progress-slider { + height: 20px; + margin: var(--space-4); + border-radius: var(--radius-small); +} + +.media-menu .progress-slider::groove { + background-color: var(--color-surface-tertiary); + height: 4px; + border-radius: var(--radius-small); +} + +.media-menu .progress-slider::groove:hover { + height: 6px; + background-color: var(--color-surface-secondary); +} + +.media-menu .progress-slider::sub-page { + background-color: var(--color-accent-default); + border-radius: var(--radius-small); + height: 4px; +} + +/* ---------------------------------------------------------------------------- + Clock Widget + ---------------------------------------------------------------------------- */ +.clock-widget .widget-container { + background-color: transparent; + border: transparent; +} + +.clock-widget .widget-container .icon { + margin-right: var(--space-8); +} + +.clock-widget .label { + font-family: var(--font-text); + font-size: var(--font-size-body); + font-weight: var(--font-weight-semibold); +} + +/* ---------------------------------------------------------------------------- + Calendar Flyout + ---------------------------------------------------------------------------- */ +.calendar { + padding: var(--space-16); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + background-color: var(--color-background-elevated); +} + +.calendar .calendar-table::item:selected { + background-color: var(--color-accent-default); + color: var(--color-background-base); + border-radius: var(--radius-small); +} + +.calendar .day-label, +.calendar .month-label, +.calendar .date-label { + font-family: var(--font-primary); + color: var(--color-text-primary); + min-width: 180px; + max-width: 180px; +} + +.calendar .month-label { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); + margin-top: var(--space-20); +} + +.calendar .day-label { + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-semibold); + margin-top: var(--space-8); +} + +.calendar .date-label { + font-size: 64px; + font-weight: var(--font-weight-bold); + margin-top: -var(--space-8); +} + +/* ---------------------------------------------------------------------------- + CPU Widget + ---------------------------------------------------------------------------- */ +.cpu-widget { + cursor: crosshair; +} + +.cpu-widget .widget-container .icon { + padding-right: var(--space-4); +} + +.cpu-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +/* ---------------------------------------------------------------------------- + GPU Widget + ---------------------------------------------------------------------------- */ +.gpu-widget .widget-container .icon { + padding-right: var(--space-4); +} + +.gpu-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +/* ---------------------------------------------------------------------------- + Memory Widget + ---------------------------------------------------------------------------- */ +.memory-widget .widget-container .icon { + padding-right: var(--space-4); +} + +.memory-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +.memory-widget .widget-container .label.status-low { + color: var(--color-success); +} + +.memory-widget .widget-container .label.status-medium { + color: var(--color-warning); +} + +.memory-widget .widget-container .label.status-high { + color: var(--color-accent-default); +} + +.memory-widget .widget-container .label.status-critical { + color: var(--color-error); +} + +.memory-widget .progress-circle { + margin-right: var(--space-8); +} + +/* ---------------------------------------------------------------------------- + Traffic Widget + ---------------------------------------------------------------------------- */ +.traffic-widget { + width: 220px; + min-width: 220px; + max-width: 220px; +} + +.traffic-widget .download { + color: #6CCB5F; + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} +.traffic-widget .upload { + color: #FF99A4; + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +.traffic-menu { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + min-width: 320px; + padding: var(--space-16); +} + +.traffic-menu .header .title { + padding: var(--space-16); + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); +} + +.traffic-menu .header .reset-button { + font-size: var(--font-size-caption); + padding: var(--space-8) var(--space-12); + margin-right: var(--space-16); + border-radius: var(--radius-medium); + font-weight: var(--font-weight-semibold); + background-color: transparent; + border: 1px solid transparent; + color: var(--color-text-secondary); +} + +.traffic-menu .reset-button:hover { + color: var(--color-text-primary); + background-color: var(--color-subtle-fill-hover); + border: 1px solid var(--color-stroke-control-default); +} + +/* Speed column styles */ +.traffic-menu .download-speed, +.traffic-menu .upload-speed { + background-color: transparent; + padding: var(--space-12); + margin: var(--space-16) var(--space-12) 0; +} + +.traffic-menu .speed-separator { + max-width: 1px; + background-color: var(--color-stroke-divider); + margin: var(--space-32) 0 var(--space-16) 0; +} + +.traffic-menu .upload-speed-value, +.traffic-menu .download-speed-value { + font-size: var(--font-size-title); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); +} + +.traffic-menu .upload-speed-unit, +.traffic-menu .download-speed-unit { + font-size: var(--font-size-body); + font-weight: var(--font-weight-semibold); + padding-top: var(--space-8); + color: var(--color-text-secondary); +} + +.traffic-menu .upload-speed-placeholder, +.traffic-menu .download-speed-placeholder { + color: var(--color-text-tertiary); + font-size: var(--font-size-caption); + padding-bottom: var(--space-16); +} + +/* Section and data styles */ +.traffic-menu .section-title { + font-size: var(--font-size-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-4); +} + +.traffic-menu .session-section, +.traffic-menu .today-section, +.traffic-menu .alltime-section { + margin: var(--space-8); + padding: 0 var(--space-12) var(--space-12); + background-color: transparent; +} + +.traffic-menu .data-text { + font-size: var(--font-size-body); + color: var(--color-text-secondary); + padding: var(--space-4); +} + +.traffic-menu .data-value { + font-weight: var(--font-weight-semibold); + font-size: var(--font-size-body); + padding: var(--space-4); + color: var(--color-text-primary); +} + +/* Interface and Internet info styles */ +.traffic-menu .interface-info { + margin-top: var(--space-12); + border-top: 1px solid var(--color-stroke-divider); + padding: var(--space-8) 0; + font-size: var(--font-size-caption); + color: var(--color-text-secondary); + font-family: var(--font-text); +} + +.traffic-menu .internet-info { + font-size: var(--font-size-caption); + color: var(--color-text-secondary); + padding: var(--space-8) 0; + font-family: var(--font-text); +} + +.traffic-menu .internet-info.connected { + background-color: rgba(108, 203, 95, 0.2); + color: var(--color-success); + padding: var(--space-8) var(--space-12); + border-radius: var(--radius-small); +} + +.traffic-menu .internet-info.disconnected { + background-color: rgba(255, 153, 164, 0.2); + color: var(--color-error); + padding: var(--space-8) var(--space-12); + border-radius: var(--radius-small); +} + +/* ---------------------------------------------------------------------------- + Volume Widget + ---------------------------------------------------------------------------- */ +.volume-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +.audio-menu { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + min-width: 320px; + padding: var(--space-8); +} + +.audio-menu .system-volume-container .volume-slider { + border: none; +} + +.audio-menu .audio-container .device { + background-color: transparent; + border: none; + padding: var(--space-8) var(--space-12); + margin: var(--space-2) 0; + font-size: var(--font-size-body); + color: var(--color-text-secondary); + border-radius: var(--radius-small); +} + +.audio-menu .audio-container .device:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.audio-menu .audio-container .device.selected { + background-color: var(--color-subtle-fill-rest); + color: var(--color-text-primary); +} + +.audio-menu .toggle-apps { + background-color: transparent; + border: none; + padding: var(--space-8); + margin: 0; + min-height: 32px; + min-width: 32px; + border-radius: var(--radius-small); +} + +.audio-menu .toggle-apps:hover { + background-color: var(--color-subtle-fill-hover); +} + +.audio-menu .toggle-apps.expanded { + background-color: var(--color-subtle-fill-rest); +} + +.audio-menu .apps-container { + padding: var(--space-12); + margin-top: var(--space-16); + border-radius: var(--radius-medium); + background-color: var(--color-surface-secondary); + border: 1px solid var(--color-stroke-divider); +} + +.audio-menu .apps-container .app-volume .app-icon-container { + min-width: 40px; + min-height: 40px; + max-width: 40px; + max-height: 40px; + border-radius: var(--radius-small); + margin-right: var(--space-8); +} + +.audio-menu .apps-container .app-volume .app-icon-container:hover { + background-color: var(--color-subtle-fill-hover); +} + +/* ---------------------------------------------------------------------------- + Microphone Widget + ---------------------------------------------------------------------------- */ +.microphone-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +.microphone-menu { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + min-width: 320px; + padding: var(--space-8); +} + +.microphone-menu .system-volume-container .volume-slider { + border: none; +} + +.microphone-menu .microphone-container .device { + background-color: transparent; + border: none; + padding: var(--space-8) var(--space-12); + margin: var(--space-2) 0; + font-size: var(--font-size-body); + color: var(--color-text-secondary); + border-radius: var(--radius-small); +} + +.microphone-menu .microphone-container .device:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +.microphone-menu .microphone-container .device.selected { + background-color: var(--color-subtle-fill-rest); + color: var(--color-text-primary); +} + +/* ---------------------------------------------------------------------------- + Disk Widget + ---------------------------------------------------------------------------- */ +.disk-widget .widget-container .icon { + font-family: var(--font-icon-2); +} + +.disk-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); +} + +.disk-group { + background-color: var(--color-background-elevated); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-medium); + padding: var(--space-8); +} + +.disk-group-row { + min-width: 270px; + max-width: 320px; + min-height: 40px; + max-height: 40px; + margin: 0; + padding: var(--space-16); + border-radius: var(--radius-medium); + border: 1px solid transparent; +} + +.disk-group-row:hover { + background-color: var(--color-subtle-fill-hover); + border: 1px solid var(--color-stroke-control-default); +} + +.disk-group-label-bar { + margin-bottom: var(--space-12); + max-height: 8px; + border: 0px solid transparent; + background-color: var(--color-surface-secondary); + border-radius: var(--radius-small); +} + +.disk-group-label-bar::chunk { + background-color: var(--color-success); + border-radius: var(--radius-small); +} + +.disk-group-label { + font-size: var(--font-size-body); + color: var(--color-text-primary); +} + +.disk-group-label-size { + font-size: var(--font-size-body); + color: var(--color-text-secondary); +} + +/* ---------------------------------------------------------------------------- + Apps Widget + ---------------------------------------------------------------------------- */ +.apps-widget .widget-container { + padding: 0 4px; +} + +.apps-widget .label { + font-size: var(--font-size-body); + color: var(--color-text-secondary); +} + +.apps-widget .label:hover { + color: var(--color-accent-default); +} + +.active-window-widget .icon { + padding: 0; +} + +/* ---------------------------------------------------------------------------- + Power Menu Widget + ---------------------------------------------------------------------------- */ +.power-menu-widget .widget-container { + background-color: transparent; + border: 0; +} + +.power-menu-widget .label { + font-family: var(--font-icon); + font-size: 16px; + color: var(--color-error); + font-weight: var(--font-weight-semibold); +} + +.power-menu-widget .label:hover { + color: var(--color-accent-default); +} + +.power-menu-popup { + border-radius: var(--radius-large); + border: 1px solid var(--color-stroke-surface); + padding: var(--space-16); +} + +.power-menu-popup .button { + width: 200px; + height: 100px; + padding: var(--space-16); + margin: var(--space-8); + + background-color: var(--color-subtle-fill-rest); + border: 1px solid var(--color-stroke-control-default); + border-radius: var(--radius-medium); + + color: var(--color-text-primary); + font-family: var(--font-primary); + + cursor: pointer; +} + +.power-menu-popup .button:hover, +.power-menu-popup .button.hover { + background-color: var(--color-subtle-fill-hover); + border-color: var(--color-stroke-focus); +} + +.power-menu-popup .button:active { + background-color: var(--color-subtle-fill-pressed); +} + +.power-menu-popup .button .label { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-8); +} + +.power-menu-popup .button .icon { + font-size: 48px; + color: var(--color-text-tertiary); + margin-top: var(--space-16); +} + +.power-menu-popup .button.shutdown .icon { + font-family: var(--font-icon); + color: var(--color-accent-default); +} + +.power-menu-popup .button.cancel .icon { + color: var(--color-error); +} + +.uptime { + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-12); +} diff --git a/themes/80198c48-f70a-44a1-8507-ce300ff8e360/theme.json b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/theme.json new file mode 100644 index 0000000..996421e --- /dev/null +++ b/themes/80198c48-f70a-44a1-8507-ce300ff8e360/theme.json @@ -0,0 +1 @@ +{"id": "80198c48-f70a-44a1-8507-ce300ff8e360", "name": "Win11 Fluent Onyx", "description": "Windows 11 theme with authentic Fluent Design", "homepage": "https://github.com/Hoxiee/YASB-Fluent-Onyx-Theme/", "style": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/80198c48-f70a-44a1-8507-ce300ff8e360/styles.css", "config": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/80198c48-f70a-44a1-8507-ce300ff8e360/config.yaml", "readme": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/80198c48-f70a-44a1-8507-ce300ff8e360/readme.md", "image": "https://raw.githubusercontent.com/amnweb/yasb-themes/main/themes/80198c48-f70a-44a1-8507-ce300ff8e360/image.png", "author": "Hoxiee", "publish_date": "2026-02-08T22:10:16.006494"} \ No newline at end of file