dotfiles
My PC Dotfiles & Websitegit clone https://github.com/maydayv7/dotfiles
commit dc1ab759a95c8c8b19814b8a98babaaa1e1f6190 parent 197df7f73806f4ae2c5831c02f03f6d235698641 Author: maydayv7 <maydayv7@gmail.com> Date: Wed, 21 Oct 2026 00:31:20 +0530 feat(Windows): YASB improvements
Diffstat:
| M | files/windows/scripts/keybinds.ahk | | | 11 | ++++++++++- |
| M | files/windows/wsl/.zshrc | | | 33 | +++++++++++++++++++++++---------- |
| M | files/windows/yasb/config.yaml | | | 71 | ++++++++++++++++++++++++++++++++++++++++++++--------------------------- |
| A | files/windows/yasb/icons/LICENSE.txt | | | 21 | +++++++++++++++++++++ |
| A | files/windows/yasb/icons/music-note-dark.svg | | | 3 | +++ |
| A | files/windows/yasb/icons/music-note-dark@2x.svg | | | 3 | +++ |
| A | files/windows/yasb/icons/music-note-light.svg | | | 3 | +++ |
| A | files/windows/yasb/icons/music-note-light@2x.svg | | | 3 | +++ |
| M | files/windows/yasb/styles.css | | | 1853 | ++++++++++++++++++++++++++++++++++++++++++++++--------------------------------- |
| M | modules/shell/shell.nix | | | 4 | ++-- |
10 files changed, 1187 insertions(+), 818 deletions(-)
diff --git a/files/windows/scripts/keybinds.ahk b/files/windows/scripts/keybinds.ahk @@ -1,4 +1,4 @@ -#Requires AutoHotkey v2.0 +#Requires AutoHotkey v2.0 ; ============================================================================== ; Keybinds @@ -88,3 +88,11 @@ } } } + +; ============================================================================== +; Miscellaneous +; ============================================================================== +; [SumatraPDF] Shift + /: Command Pallete +#HotIf WinActive("ahk_exe SumatraPDF.exe") +^vkBF:: Send "^k" +#HotIf +\ No newline at end of file diff --git a/files/windows/wsl/.zshrc b/files/windows/wsl/.zshrc @@ -4,10 +4,20 @@ antidote load autoload -Uz compinit && compinit # Keybinds -bindkey "^[[1;5C" forward-word -bindkey "^[[1;5D" backward-word -bindkey "^[[3~" delete-char -bindkey "^[[3;5~" kill-word +bindkey '^[[1;5C' forward-word +bindkey '^[[1;5D' backward-word +bindkey '^[[3;5~' kill-word +bindkey '^[[3~' delete-char +bindkey '^[[5~' beginning-of-history +bindkey '^[[6~' end-of-history +bindkey '^[[A' up-line-or-search +bindkey '^[[B' down-line-or-search +bindkey '^[[C' forward-char +bindkey '^[[D' backward-char +bindkey '^[[F' end-of-linegestures +bindkey '^[[H' beginning-of-line +bindkey '^H' backward-kill-word +bindkey '^J' backward-kill-line # Command Aliases alias c="bat" @@ -17,15 +27,18 @@ alias sike="fastfetch" alias whome="cd /mnt/c/Users" # Editor -npp() { - local npp_exe="/mnt/c/Program Files/Notepad++/notepad++.exe" - if [ $# -eq 0 ]; then - "$npp_exe" > /dev/null 2>&1 &! +np() { + local notepad_exe="/mnt/c/Windows/System32/notepad.exe" + + if [ $# -eq 0 ] + then + "$notepad_exe" > /dev/null 2>&1 &! return fi - local win_path="$(wslpath -w "$1")" - "$npp_exe" "$win_path" > /dev/null 2>&1 &! + local win_path + win_path="$(wslpath -aw "$1")" || return + "$notepad_exe" "$win_path" > /dev/null 2>&1 &! } # Command History diff --git a/files/windows/yasb/config.yaml b/files/windows/yasb/config.yaml @@ -63,8 +63,8 @@ widgets: task_view: type: "yasb.custom.CustomWidget" options: - label: "<span>\ue154</span>" - label_alt: "<span>\ue154</span>" + label: "<span>\ue7c4</span>" + label_alt: "<span>\ue7c4</span>" class_name: "task-view-widget" callbacks: on_left: "exec explorer.exe shell:::{3080F90E-D7AD-11D9-BD98-0000947B0257}" @@ -126,7 +126,7 @@ widgets: clock: type: "yasb.clock.ClockWidget" options: - label: "<span>\uf017</span> {%a %d %b %H:%M}" + label: "<span>\ue917</span> {%a %d %b %H:%M}" label_alt: "{%A %d %B %Y %H:%M:%S}" timezones: [] calendar: @@ -175,8 +175,8 @@ widgets: media: type: "yasb.media.MediaWidget" options: - label: "<span>\u266a</span> {title}" - label_alt: "<span>\u266a</span> {artist}" + label: "{title}" + label_alt: "{artist}" hide_empty: true callbacks: on_left: "toggle_media_menu" @@ -185,6 +185,7 @@ widgets: max_field_size: label: 45 label_alt: 80 + truncate_whole_label: false show_thumbnail: false controls_only: false controls_left: false @@ -192,10 +193,10 @@ widgets: thumbnail_padding: 8 thumbnail_corner_radius: 16 icons: - prev_track: "\udb81\udcae" - next_track: "\udb81\udcad" - play: "\udb81\udc0a" - pause: "\udb80\udfe4" + prev_track: "\ue892" + next_track: "\ue893" + play: "\ue768" + pause: "\ue769" media_menu: blur: true round_corners: true @@ -216,13 +217,12 @@ widgets: next_track: "\ue893" weather: - type: "yasb.weather.WeatherWidget" + type: "yasb.open_meteo.OpenMeteoWidget" options: label: "<span>{icon}</span> {temp}" label_alt: "{location}: {min_temp}/{max_temp}" - api_key: "$env:YASB_WEATHER_API_KEY" - location: "auto:ip" - show_alerts: true + forecast_days: 7 + update_interval: 900 hide_decimal: true units: "metric" callbacks: @@ -238,7 +238,6 @@ widgets: rainyNight: "\udb81\ude7e" snowyDay: "\udb81\udd98" snowyNight: "\udb81\udd98" - blizzardDay: "\uebaa" default: "\uebaa" weather_card: blur: True @@ -248,7 +247,10 @@ widgets: alignment: "right" direction: "down" offset_top: 6 - icon_size: 64 + icon_size: 48 + show_hourly_forecast: true + time_format: "24h" + hourly_icon_size: 24 cpu: type: "yasb.cpu.CpuWidget" @@ -404,7 +406,7 @@ widgets: mute_text: "Mute" icons: normal: "\ue720" - muted: "\uf12e" + muted: "\uec54" mic_menu: blur: true round_corners: true @@ -423,17 +425,24 @@ widgets: label: "<span>{icon}</span> {level}" label_alt: "{volume}" mute_text: "Mute" - volume_icons: - - "\ue74f" # Mute - - "\ue992" # 10% - - "\ue993" # 30% - - "\ue994" # 60% - - "\ue995" # 100% + icons: + muted: "\ue74f" + "10": "\ue992" + "30": "\ue993" + "60": "\ue994" + "100": "\ue995" callbacks: on_left: "toggle_volume_menu" on_middle: "exec cmd.exe /c start ms-settings:sound" on_right: "toggle_mute" audio_menu: + show_apps: true + show_app_labels: true + show_app_icons: true + show_apps_expanded: true + app_icons: + toggle_down: "\ue70d" + toggle_up: "\ue70e" blur: true round_corners: true round_corners_type: "normal" @@ -494,13 +503,21 @@ widgets: max_length: 15 max_length_ellipsis: "..." icons: - bluetooth_on: "\uec41" - bluetooth_off: "\ueb90" + bluetooth_on: "\ue702" + bluetooth_off: "\ue702" bluetooth_connected: "\ue702" callbacks: - on_left: "exec cmd.exe /c start ms-settings:bluetooth" - on_middle: "do_nothing" + on_left: "toggle_menu" + on_middle: "exec cmd.exe /c start ms-settings:bluetooth" on_right: "toggle_label" + menu_config: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + alignment: "right" + direction: "down" + offset_top: 6 battery: type: "yasb.battery.BatteryWidget" @@ -511,7 +528,7 @@ widgets: hide_unsupported: true charging_options: icon_format: "{charging_icon}" - blink_charging_icon: true + blink_charging_icon: false blink_interval: 800 status_thresholds: critical: 10 diff --git a/files/windows/yasb/icons/LICENSE.txt b/files/windows/yasb/icons/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Microsoft Corporation + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/files/windows/yasb/icons/music-note-dark.svg b/files/windows/yasb/icons/music-note-dark.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z" fill="#ffffff" fill-opacity="0.786"/> +</svg> diff --git a/files/windows/yasb/icons/music-note-dark@2x.svg b/files/windows/yasb/icons/music-note-dark@2x.svg @@ -0,0 +1,3 @@ +<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z" fill="#ffffff" fill-opacity="0.786"/> +</svg> diff --git a/files/windows/yasb/icons/music-note-light.svg b/files/windows/yasb/icons/music-note-light.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z" fill="#000000" fill-opacity="0.6063"/> +</svg> diff --git a/files/windows/yasb/icons/music-note-light@2x.svg b/files/windows/yasb/icons/music-note-light@2x.svg @@ -0,0 +1,3 @@ +<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z" fill="#000000" fill-opacity="0.6063"/> +</svg> diff --git a/files/windows/yasb/styles.css b/files/windows/yasb/styles.css @@ -1,7 +1,7 @@ /* ---- YASB Panel Style ---- */ :root { /* Fonts */ - --font-primary: "Segoe UI", system-ui; + --font-primary: "Segoe UI Variable Text", "Segoe UI", system-ui; --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui; --font-mono: "MesloLGS NF"; --font-icon: "Segoe Fluent Icons", "MesloLGS NF"; @@ -17,7 +17,7 @@ --font-size-display: 48px; --font-weight-regular: 400; - --font-weight-semibold: 500; + --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ @@ -27,29 +27,24 @@ --space-8: 8px; --space-12: 12px; --space-16: 16px; - --space-20: 20px; --space-24: 24px; - --space-32: 32px; /* Dimensions */ --width-menu-sm: 160px; --width-menu-md: 280px; --width-menu-lg: 380px; --size-icon-btn: 28px; - --size-app-icon: 32px; + --size-app-icon: 24px; --height-item-md: 36px; --height-item-lg: 80px; - /* Border Radius */ - --radius-none: 0; + /* Border radii */ --radius-small: 4px; --radius-medium: 6px; --radius-large: 8px; - --radius-circle: 32px; /* -- Light Theme -- */ --color-background-base: rgba(243, 243, 243, 0.9); - --color-background-layer: rgba(249, 249, 249, 0.8); --color-background-elevated: rgba(252, 252, 252, 0.9); --color-background-elevated-x2: rgba(255, 255, 255, 0.7); @@ -57,9 +52,7 @@ --color-widget-container: rgba(212, 212, 212, 0.7); /* Surface Colors */ - --color-surface-default: rgba(0, 0, 0, 0.0373); --color-surface-secondary: rgba(0, 0, 0, 0.0241); - --color-surface-tertiary: rgba(0, 0, 0, 0.0186); --color-surface-disabled: rgba(0, 0, 0, 0.0241); /* Text Colors */ @@ -71,14 +64,11 @@ /* Accent Colors */ --color-accent-default: #0078d4; --color-accent-secondary: #005a9e; - --color-accent-tertiary: rgba(0, 120, 212, 0.4); - --color-accent-disabled: rgba(0, 0, 0, 0.2); /* Semantic Colors */ --color-success: #107c10; - --color-warning: #ffe600c0; + --color-warning: #9d5d00; --color-error: #c42b1c; - --color-info: #0078d4; /* Component Colors */ --color-traffic-download: #1a7c0d; @@ -90,7 +80,6 @@ --color-subtle-fill-rest: rgba(0, 0, 0, 0.0373); --color-subtle-fill-hover: rgba(0, 0, 0, 0.0578); --color-subtle-fill-pressed: rgba(0, 0, 0, 0.0241); - --color-subtle-fill-disabled: transparent; /* Stroke/Border Colors */ --color-stroke-surface: rgba(0, 0, 0, 0.0578); @@ -100,7 +89,6 @@ /* -- Dark Theme -- */ --color-dark-background-base: rgba(30, 30, 30, 0.7); - --color-dark-background-layer: rgba(44, 44, 44, 0.5); --color-dark-background-elevated: rgba(22, 22, 22, 0.25); --color-dark-background-elevated-x2: rgba(22, 22, 22, 0.8); @@ -108,9 +96,7 @@ --color-dark-widget-container: rgba(60, 60, 60, 0.7); /* Surface Colors */ - --color-dark-surface-default: rgba(255, 255, 255, 0.0605); --color-dark-surface-secondary: rgba(255, 255, 255, 0.0419); - --color-dark-surface-tertiary: rgba(255, 255, 255, 0.0326); --color-dark-surface-disabled: rgba(255, 255, 255, 0.0419); /* Text Colors */ @@ -123,13 +109,11 @@ --color-dark-accent-default: #60cdff; --color-dark-accent-secondary: #0078d4; --color-dark-accent-tertiary: rgba(96, 205, 255, 0.5); - --color-dark-accent-disabled: rgba(255, 255, 255, 0.1581); /* Semantic Colors */ --color-dark-success: #6ccb5f; --color-dark-warning: #fce100; --color-dark-error: #ff99a4; - --color-dark-info: #60cdff; /* Component Colors */ --color-dark-traffic-download: var(--color-dark-success); @@ -141,7 +125,6 @@ --color-dark-subtle-fill-rest: rgba(255, 255, 255, 0.0605); --color-dark-subtle-fill-hover: rgba(255, 255, 255, 0.0837); --color-dark-subtle-fill-pressed: rgba(255, 255, 255, 0.0512); - --color-dark-subtle-fill-disabled: transparent; /* Stroke/Border Colors */ --color-dark-stroke-surface: rgba(255, 255, 255, 0.0698); @@ -151,7 +134,7 @@ } /* ---------------------------------------------------------------------------- - Global Reset + Global reset ---------------------------------------------------------------------------- */ * { font-size: var(--font-size-body); @@ -167,7 +150,7 @@ } /* ---------------------------------------------------------------------------- - Layout + Bar layout and labels ---------------------------------------------------------------------------- */ .yasb-panel { padding: 0 var(--space-4); @@ -181,7 +164,6 @@ border-bottom: 1px solid var(--color-dark-stroke-control-default); } -/* Label */ .widget { padding: 0 var(--space-2); margin: 0; @@ -197,24 +179,6 @@ color: var(--color-dark-text-secondary); } -.active-window-widget .widget-container .label, -.clock-widget .label, -.media-widget .label, -.cpu-widget .widget-container .label, -.gpu-widget .widget-container .label, -.memory-widget .widget-container .label, -.disk-widget .widget-container .label, -.traffic-widget .download, -.traffic-widget .upload, -.microphone-widget .widget-container .label, -.volume-widget .widget-container .label, -.brightness-widget .widget-container .label, -.wifi-widget .widget-container .label, -.bluetooth-widget .widget-container .label, -.battery-widget .widget-container .label { - text-shadow: 0px 0px 1px black; -} - .widget .label.alt { padding: 0 var(--space-4); } @@ -227,7 +191,6 @@ color: var(--color-dark-text-primary); } -/* Icon */ .widget .icon { padding-top: 1px; font-family: var(--font-icon); @@ -248,7 +211,9 @@ color: var(--color-dark-text-primary); } -/* Tooltip */ +/* ---------------------------------------------------------------------------- + Tooltips + ---------------------------------------------------------------------------- */ .tooltip { background-color: var(--color-background-elevated-x2); border: 1px solid var(--color-stroke-surface); @@ -269,10 +234,9 @@ } /* ---------------------------------------------------------------------------- - Context Menu + Context menus ---------------------------------------------------------------------------- */ -.context-menu, -.context-menu .menu-checkbox { +.context-menu { background-color: var(--color-dark-background-elevated); border: 1px solid var(--color-dark-stroke-surface); border-radius: var(--radius-medium); @@ -282,14 +246,25 @@ color: var(--color-dark-text-primary); } +.context-menu .menu-checkbox { + font-family: var(--font-primary); + font-size: var(--font-size-body); + color: var(--color-dark-text-primary); + background-color: transparent; + padding: var(--space-4) var(--space-8); + margin: var(--space-2) var(--space-4); + border-radius: var(--radius-small); + border: 0; + min-width: var(--width-menu-sm); +} + .context-menu::right-arrow { width: var(--space-8); height: var(--space-8); padding-right: var(--space-24); } -.context-menu::item, -.context-menu .menu-checkbox { +.context-menu::item { background-color: transparent; padding: var(--space-4) var(--space-8); margin: var(--space-2) var(--space-4); @@ -355,7 +330,7 @@ } /* ---------------------------------------------------------------------------- - Common Widget Container + Widget containers ---------------------------------------------------------------------------- */ .widget-container { padding: 1px var(--space-4); @@ -381,284 +356,609 @@ } /* ---------------------------------------------------------------------------- - Task View Widget + Shared bar widget styling ---------------------------------------------------------------------------- */ -.task-view-widget .widget-container { - background-color: transparent; - border: 0; +.microphone-widget .widget-container .label, +.volume-widget .widget-container .label, +.brightness-widget .widget-container .label, +.wifi-widget .widget-container .label, +.bluetooth-widget .widget-container .label, +.battery-widget .widget-container .label { + color: var(--color-text-secondary); + font-family: var(--font-text); + font-weight: var(--font-weight-semibold); } -.task-view-widget .widget-container:hover { - background-color: transparent; +*.dark .microphone-widget .widget-container .label, +*.dark .volume-widget .widget-container .label, +*.dark .brightness-widget .widget-container .label, +*.dark .wifi-widget .widget-container .label, +*.dark .bluetooth-widget .widget-container .label, +*.dark .battery-widget .widget-container .label { + color: var(--color-dark-text-secondary); } -.task-view-widget .icon { - font-family: var(--font-icon-2); - font-size: var(--font-size-subtitle); +.active-window-widget .widget-container .label, +.cpu-widget .widget-container .label, +.gpu-widget .widget-container .label, +.memory-widget .widget-container .label, +.disk-widget .widget-container .label { color: var(--color-text-secondary); + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); } -*.dark .task-view-widget .icon { - font-family: var(--font-icon-2); - font-size: var(--font-size-subtitle); +*.dark .active-window-widget .widget-container .label, +*.dark .cpu-widget .widget-container .label, +*.dark .gpu-widget .widget-container .label, +*.dark .memory-widget .widget-container .label, +*.dark .disk-widget .widget-container .label { color: var(--color-dark-text-secondary); } -.task-view-widget .icon:hover { - color: var(--color-accent-default); +.microphone-widget .icon, +.volume-widget .icon, +.brightness-widget .widget-container .icon, +.wifi-widget .widget-container .icon, +.bluetooth-widget .widget-container .icon, +.battery-widget .widget-container .icon { + padding-left: var(--space-4); } -*.dark .task-view-widget .icon:hover { - color: var(--color-dark-accent-default); +.cpu-widget .widget-container .icon, +.gpu-widget .widget-container .icon, +.memory-widget .widget-container .icon { + padding-right: var(--space-4); } -/* ---------------------------------------------------------------------------- - Home Widget - ---------------------------------------------------------------------------- */ -.home-widget .widget-container { +.task-view-widget .widget-container, +.home-widget .widget-container, +.power-menu-widget .widget-container { background-color: transparent; border: 0; } -.home-widget .widget-container:hover { +.task-view-widget .widget-container:hover, +.home-widget .widget-container:hover, +.power-menu-widget .widget-container:hover { background-color: transparent; } -.home-widget .icon { - font-family: var(--font-icon-2); - font-size: var(--font-size-subtitle); - color: var(--color-text-secondary); -} - -*.dark .home-widget .icon { - color: var(--color-dark-text-secondary); +/* ---------------------------------------------------------------------------- + Shared flyout surfaces + ---------------------------------------------------------------------------- */ +.brightness-menu, +.audio-menu, +.microphone-menu, +.wifi-menu, +.bluetooth-menu, +.calendar, +.media-menu, +.open-meteo-card { + background-color: rgba(249, 249, 249, 0.94); + color: var(--color-text-primary); + border: 1px solid var(--color-stroke-surface); + border-radius: var(--radius-large); + padding: var(--space-12); } -.home-widget .icon:hover { - color: var(--color-accent-default); +*.dark .brightness-menu, +*.dark .audio-menu, +*.dark .microphone-menu, +*.dark .wifi-menu, +*.dark .bluetooth-menu, +*.dark .calendar, +*.dark .media-menu, +*.dark .open-meteo-card { + background-color: rgba(32, 32, 32, 0.9); + color: var(--color-dark-text-primary); + border-color: var(--color-dark-stroke-control-default); } -*.dark .home-widget .icon:hover { - color: var(--color-dark-accent-default); +/* ---------------------------------------------------------------------------- + Shared sound and brightness controls + ---------------------------------------------------------------------------- */ +.audio-menu, +.microphone-menu { + min-width: var(--width-menu-md); + max-width: 360px; } -.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); +.microphone-menu .microphone-container .device, +.audio-menu .audio-container .device { + background-color: transparent; + border: none; + padding: var(--space-4) var(--space-8); + margin: var(--space-2) 0; font-size: var(--font-size-body); - color: var(--color-text-primary); -} - -*.dark .home-menu { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); - color: var(--color-dark-text-primary); + color: var(--color-text-secondary); + border-radius: var(--radius-small); } -.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: 180px; +*.dark .microphone-menu .microphone-container .device, +*.dark .audio-menu .audio-container .device { + color: var(--color-dark-text-secondary); } -.home-menu .menu-item:hover { +.microphone-menu .microphone-container .device:hover, +.audio-menu .audio-container .device:hover { background-color: var(--color-subtle-fill-hover); color: var(--color-text-primary); } -*.dark .home-menu .menu-item:hover { +*.dark .microphone-menu .microphone-container .device:hover, +*.dark .audio-menu .audio-container .device:hover { background-color: var(--color-dark-subtle-fill-hover); color: var(--color-dark-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); +.microphone-menu .microphone-container .device.selected, +.audio-menu .audio-container .device.selected { + background-color: var(--color-subtle-fill-rest); + color: var(--color-text-primary); } -*.dark .home-menu .separator { - background-color: var(--color-dark-stroke-divider); +*.dark .microphone-menu .microphone-container .device.selected, +*.dark .audio-menu .audio-container .device.selected { + background-color: var(--color-dark-subtle-fill-rest); + color: var(--color-dark-text-primary); } -/* ---------------------------------------------------------------------------- - Windows Desktops - ---------------------------------------------------------------------------- */ -.windows-desktops .ws-btn { - color: var(--color-text-tertiary); +.audio-menu QSlider, +.microphone-menu QSlider, +.brightness-menu QSlider { + min-height: 24px; + border: none; background-color: transparent; +} + +.audio-menu QSlider::groove:horizontal, +.microphone-menu QSlider::groove:horizontal, +.brightness-menu QSlider::groove:horizontal { + height: 4px; border: none; - font-size: var(--font-size-body-strong); - padding-left: unset; - padding: 1px 3px; - margin: -1px 0 0 0; - border-radius: var(--radius-small); - min-width: var(--space-16); - box-shadow: 0px 0px 1px black; + border-radius: 2px; + background-color: rgba(0, 0, 0, 0.38); } -*.dark .windows-desktops .ws-btn { - color: var(--color-dark-text-tertiary); +*.dark .audio-menu QSlider::groove:horizontal, +*.dark .microphone-menu QSlider::groove:horizontal, +*.dark .brightness-menu QSlider::groove:horizontal { + background-color: rgba(255, 255, 255, 0.35); } -.windows-desktops .ws-btn:hover { - color: var(--color-text-secondary); +.audio-menu QSlider::sub-page:horizontal, +.microphone-menu QSlider::sub-page:horizontal, +.brightness-menu QSlider::sub-page:horizontal { + background-color: var(--color-accent-default); + border-radius: 2px; } -*.dark .windows-desktops .ws-btn:hover { - color: var(--color-dark-text-secondary); +*.dark .audio-menu QSlider::sub-page:horizontal, +*.dark .microphone-menu QSlider::sub-page:horizontal, +*.dark .brightness-menu QSlider::sub-page:horizontal { + background-color: var(--color-dark-accent-default); } -.windows-desktops .ws-btn.active { - color: var(--color-accent-default); - font-weight: var(--font-weight-semibold); +.audio-menu QSlider::handle:horizontal, +.microphone-menu QSlider::handle:horizontal, +.brightness-menu QSlider::handle:horizontal { + width: 10px; + height: 10px; + margin: -7px 0; + border: 4px solid #ffffff; + border-radius: 9px; + background-color: var(--color-accent-default); } -*.dark .windows-desktops .ws-btn.active { - color: var(--color-dark-accent-default); +*.dark .audio-menu QSlider::handle:horizontal, +*.dark .microphone-menu QSlider::handle:horizontal, +*.dark .brightness-menu QSlider::handle:horizontal { + background-color: var(--color-dark-accent-default); } -.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); +.audio-menu QSlider::handle:horizontal:hover, +.microphone-menu QSlider::handle:horizontal:hover, +.brightness-menu QSlider::handle:horizontal:hover { + border-width: 3px; } -*.dark .windows-desktops .context-menu { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); +.audio-menu QSlider::handle:horizontal:pressed, +.microphone-menu QSlider::handle:horizontal:pressed, +.brightness-menu QSlider::handle:horizontal:pressed { + border-width: 5px; } -.windows-desktops .context-menu .menu-item { - padding: var(--space-8) var(--space-16); - border-radius: var(--radius-small); - color: var(--color-text-secondary); +.audio-menu QSlider::sub-page:horizontal:disabled, +.microphone-menu QSlider::sub-page:horizontal:disabled, +.brightness-menu QSlider::sub-page:horizontal:disabled { + background-color: var(--color-text-disabled); } -*.dark .windows-desktops .context-menu .menu-item { - color: var(--color-dark-text-secondary); +/* ---------------------------------------------------------------------------- + Shared connection flyout controls + ---------------------------------------------------------------------------- */ +.wifi-menu .wifi-item, +.bluetooth-menu .bluetooth-item { + min-height: var(--height-item-md); + padding: var(--space-4) var(--space-12); + margin: var(--space-2) var(--space-8) var(--space-2) var(--space-2); + border-radius: var(--radius-small); + border: 1px solid transparent; } -.windows-desktops .context-menu .menu-item:hover { +.wifi-menu .wifi-item:hover, +.bluetooth-menu .bluetooth-item:hover { background-color: var(--color-subtle-fill-hover); - color: var(--color-text-primary); + border-color: var(--color-stroke-control-default); } -*.dark .windows-desktops .context-menu .menu-item:hover { +*.dark .wifi-menu .wifi-item:hover, +*.dark .bluetooth-menu .bluetooth-item:hover { background-color: var(--color-dark-subtle-fill-hover); - color: var(--color-dark-text-primary); + border-color: var(--color-dark-stroke-control-default); } -.windows-desktops .context-menu .separator { - height: 1px; - background-color: var(--color-stroke-divider); - margin: var(--space-4) 0; +.wifi-menu .wifi-item[active="true"], +.bluetooth-menu .bluetooth-item.active { + background-color: var(--color-subtle-fill-rest); + min-height: var(--height-item-lg); } -*.dark .windows-desktops .context-menu .separator { - background-color: var(--color-dark-stroke-divider); +*.dark .wifi-menu .wifi-item[active="true"], +*.dark .bluetooth-menu .bluetooth-item.active { + background-color: var(--color-dark-subtle-fill-rest); } -/* Qt-specific Dialog Styles */ -.windows-desktops .rename-dialog { - border: 1px solid var(--color-stroke-surface); - border-radius: var(--radius-large); +.wifi-menu .header, +.bluetooth-menu .header .title { + font-family: var(--font-text); + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-semibold); + padding: var(--space-12); } -*.dark .windows-desktops .rename-dialog { - border: 1px solid var(--color-stroke-surface); +.wifi-menu .wifi-item .name, +.bluetooth-menu .bluetooth-item .name { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); +} + +.wifi-menu .wifi-item .icon, +.bluetooth-menu .bluetooth-item .icon { + font-family: var(--font-icon); + font-size: var(--font-size-title); + margin-right: var(--space-12); } -.windows-desktops .rename-dialog QPushButton { +.wifi-menu .wifi-item .connect, +.bluetooth-menu .bluetooth-item .connect { background-color: var(--color-accent-default); - color: var(--color-background-base); - border: none; - padding: var(--space-8) var(--space-16); + color: white; + padding: var(--space-4) var(--space-16); border-radius: var(--radius-small); + border: none; font-weight: var(--font-weight-semibold); + margin-top: var(--space-8); } -*.dark .windows-desktops .rename-dialog QPushButton { +*.dark .wifi-menu .wifi-item .connect, +*.dark .bluetooth-menu .bluetooth-item .connect { background-color: var(--color-dark-accent-default); - color: var(--color-dark-background-base); + color: black; } -.windows-desktops .rename-dialog QPushButton:hover { +.wifi-menu .wifi-item .connect:hover, +.bluetooth-menu .bluetooth-item .connect:hover { background-color: var(--color-accent-secondary); } -*.dark .windows-desktops .rename-dialog QPushButton:hover { - background-color: var(--color-dark-accent-secondary); -} - -.windows-desktops .rename-dialog QLabel { - color: var(--color-text-primary); - font-size: var(--font-size-body); -} - -*.dark .windows-desktops .rename-dialog QLabel { +*.dark .wifi-menu .wifi-item .connect:hover, +*.dark .bluetooth-menu .bluetooth-item .connect:hover { + background-color: var(--color-dark-accent-tertiary); color: var(--color-dark-text-primary); } -.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); +.wifi-menu .wifi-item .status, +.bluetooth-menu .bluetooth-item .status { + font-size: var(--font-size-caption); + color: var(--color-text-tertiary); } -*.dark .windows-desktops .rename-dialog QLineEdit { - background-color: var(--color-dark-surface-secondary); - border: 1px solid var(--color-dark-stroke-control-default); - color: var(--color-dark-text-primary); +*.dark .wifi-menu .wifi-item .status, +*.dark .bluetooth-menu .bluetooth-item .status { + color: var(--color-dark-text-tertiary); } -.windows-desktops .rename-dialog QLineEdit:focus { - border-color: var(--color-accent-default); - outline: none; +.wifi-menu .footer, +.bluetooth-menu .footer { + padding: var(--space-8); + margin-top: var(--space-8); + border-top: 1px solid var(--color-stroke-divider); } -*.dark .windows-desktops .rename-dialog QLineEdit:focus { - border-color: var(--color-dark-accent-default); +.wifi-menu, +.bluetooth-menu { + min-width: 340px; + max-width: var(--width-menu-lg); } -/* ---------------------------------------------------------------------------- - Active Window Widget - ---------------------------------------------------------------------------- */ -.active-window-widget .widget-container .icon { +.wifi-menu .footer .refresh-icon { + color: var(--color-text-primary); + font-family: var(--font-icon); + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-regular); + background-color: transparent; + border: none; + border-radius: var(--radius-small); + min-width: var(--size-icon-btn); + min-height: var(--size-icon-btn); +} + +*.dark .wifi-menu .footer .refresh-icon { + color: var(--color-dark-text-primary); +} + +.wifi-menu .footer .refresh-icon:hover { + color: var(--color-accent-default); + background-color: var(--color-subtle-fill-hover); +} + +.wifi-menu .footer .settings-button, +.bluetooth-menu .footer .settings-button { + background-color: transparent; + border: 1px solid transparent; + border-radius: var(--radius-small); + font-family: var(--font-text); + color: var(--color-text-secondary); + padding: var(--space-6) var(--space-8); +} + +*.dark .wifi-menu .footer .settings-button, +*.dark .bluetooth-menu .footer .settings-button { + color: var(--color-dark-text-secondary); +} + +.wifi-menu .footer .settings-button:hover, +.bluetooth-menu .footer .settings-button:hover { + background-color: var(--color-subtle-fill-hover); +} + +*.dark .wifi-menu .footer .settings-button:hover, +*.dark .bluetooth-menu .footer .settings-button:hover { + background-color: var(--color-dark-subtle-fill-hover); +} + +.bluetooth-menu .footer .scan-icon { font-family: var(--font-icon); + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-regular); + background-color: transparent; + border: none; + border-radius: var(--radius-small); + min-width: var(--size-icon-btn); + min-height: var(--size-icon-btn); +} + +.bluetooth-menu .footer .scan-icon:hover { + background-color: var(--color-subtle-fill-hover); +} + +*.dark .bluetooth-menu .footer .scan-icon:hover, +*.dark .wifi-menu .footer .refresh-icon:hover { + background-color: var(--color-dark-subtle-fill-hover); +} + +.wifi-menu .progress-bar, +.bluetooth-menu .progress-bar { + min-height: 2px; + max-height: 2px; + color: var(--color-accent-default); + background-color: transparent; +} + +*.dark .wifi-menu .progress-bar, +*.dark .bluetooth-menu .progress-bar { + color: var(--color-dark-accent-default); +} + +.wifi-menu .error-message, +.bluetooth-menu .error-message { + padding: var(--space-8); + border-radius: var(--radius-small); + color: var(--color-error); + background-color: var(--color-error-bg); +} + +*.dark .wifi-menu .error-message, +*.dark .bluetooth-menu .error-message { + color: var(--color-dark-error); + background-color: var(--color-dark-error-bg); +} + +/* ---------------------------------------------------------------------------- + Task View + ---------------------------------------------------------------------------- */ +.task-view-widget .icon { + font-family: var(--font-icon); + font-size: var(--font-size-subtitle); + color: var(--color-text-secondary); +} + +*.dark .task-view-widget .icon { + color: var(--color-dark-text-secondary); +} + +.task-view-widget .icon:hover { + color: var(--color-accent-default); +} + +*.dark .task-view-widget .icon:hover { + color: var(--color-dark-accent-default); +} + +/* ---------------------------------------------------------------------------- + Home + ---------------------------------------------------------------------------- */ +.home-widget .icon { + font-family: var(--font-icon-2); + font-size: var(--font-size-subtitle); + color: var(--color-text-secondary); +} + +*.dark .home-widget .icon { + color: var(--color-dark-text-secondary); +} + +.home-widget .icon:hover { + color: var(--color-accent-default); +} + +*.dark .home-widget .icon:hover { + color: var(--color-dark-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); - padding-left: var(--space-6); + color: var(--color-text-primary); } -.active-window-widget .icon { - padding: 0; +*.dark .home-menu { + background-color: var(--color-dark-background-elevated); + border: 1px solid var(--color-dark-stroke-surface); + color: var(--color-dark-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: 180px; +} + +.home-menu .menu-item:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +*.dark .home-menu .menu-item:hover { + background-color: var(--color-dark-subtle-fill-hover); + color: var(--color-dark-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); +} + +*.dark .home-menu .separator { + background-color: var(--color-dark-stroke-divider); +} + +/* ---------------------------------------------------------------------------- + Windows desktops + ---------------------------------------------------------------------------- */ +.windows-desktops .ws-btn { + color: var(--color-text-tertiary); + background-color: transparent; + border: none; + font-size: var(--font-size-body-strong); + padding: 1px 3px; + margin: -1px 0 0 0; + border-radius: var(--radius-small); + min-width: var(--space-16); + box-shadow: 0px 0px 1px black; +} + +*.dark .windows-desktops .ws-btn { + color: var(--color-dark-text-tertiary); } -.active-window-widget .widget-container .label { +.windows-desktops .ws-btn:hover { color: var(--color-text-secondary); - font-family: var(--font-mono); +} + +*.dark .windows-desktops .ws-btn:hover { + color: var(--color-dark-text-secondary); +} + +.windows-desktops .ws-btn.active { + color: var(--color-accent-default); font-weight: var(--font-weight-semibold); } -*.dark .active-window-widget .widget-container .label { +*.dark .windows-desktops .ws-btn.active { + color: var(--color-dark-accent-default); +} + +.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); +} + +*.dark .windows-desktops .context-menu { + background-color: var(--color-dark-background-elevated); + border: 1px solid var(--color-dark-stroke-surface); +} + +.windows-desktops .context-menu .menu-item { + padding: var(--space-8) var(--space-16); + border-radius: var(--radius-small); + color: var(--color-text-secondary); +} + +*.dark .windows-desktops .context-menu .menu-item { color: var(--color-dark-text-secondary); } +.windows-desktops .context-menu .menu-item:hover { + background-color: var(--color-subtle-fill-hover); + color: var(--color-text-primary); +} + +*.dark .windows-desktops .context-menu .menu-item:hover { + background-color: var(--color-dark-subtle-fill-hover); + color: var(--color-dark-text-primary); +} + +.windows-desktops .context-menu .separator { + height: 1px; + background-color: var(--color-stroke-divider); + margin: var(--space-4) 0; +} + +*.dark .windows-desktops .context-menu .separator { + background-color: var(--color-dark-stroke-divider); +} + /* ---------------------------------------------------------------------------- - Taskbar Widget + Active window + ---------------------------------------------------------------------------- */ +.active-window-widget .widget-container .icon { + font-family: var(--font-icon); + font-size: var(--font-size-body); + padding-left: var(--space-6); +} + +.active-window-widget .icon { + padding: 0; +} + +/* ---------------------------------------------------------------------------- + Taskbar ---------------------------------------------------------------------------- */ .taskbar-widget .app-container { padding: 0 var(--space-4); @@ -731,7 +1031,7 @@ } /* ---------------------------------------------------------------------------- - Apps Widget + Applications ---------------------------------------------------------------------------- */ .apps-widget .widget-container { padding: 0 var(--space-4); @@ -755,10 +1055,33 @@ } /* ---------------------------------------------------------------------------- - Media Widget + Media ---------------------------------------------------------------------------- */ +.media-menu .title, +.media-menu .artist, +.media-menu .source { + font-family: var(--font-text); + margin-left: var(--space-12); +} + +.media-widget .label, +.media-widget .label.alt { + margin-left: var(--space-4); + padding: 0 var(--space-4) 0 22px; + background-image: url("icons/music-note-light.svg"); + background-repeat: no-repeat; + background-position: left center; + background-origin: padding; +} + +*.dark .media-widget .label, +*.dark .media-widget .label.alt { + background-image: url("icons/music-note-dark.svg"); +} + .media-widget .btn { - font-size: var(--font-size-body); + font-family: var(--font-icon); + font-size: var(--font-size-body-strong); color: var(--color-text-secondary); padding: var(--space-2) var(--space-4); margin: 0 var(--space-2); @@ -781,31 +1104,17 @@ background-color: var(--color-dark-subtle-fill-hover); } -.media-widget .btn:active { +.media-widget .btn:pressed { background-color: var(--color-subtle-fill-pressed); } -*.dark .media-widget .btn:active { +*.dark .media-widget .btn:pressed { background-color: var(--color-dark-subtle-fill-pressed); } -.media-menu { - min-width: var(--width-menu-lg); - max-width: var(--width-menu-lg); - border-radius: var(--radius-medium); - padding: var(--space-12); - background-color: var(--color-background-elevated); -} - -*.dark .media-menu { - background-color: var(--color-dark-background-elevated); -} - -.media-menu .title, -.media-menu .artist, -.media-menu .source { - font-family: var(--font-text); - margin-left: var(--space-12); +.media-menu { + min-width: var(--width-menu-lg); + max-width: var(--width-menu-lg); } .media-menu .title { @@ -814,10 +1123,6 @@ color: var(--color-text-primary); } -*.dark .media-menu .title { - color: var(--color-dark-text-primary); -} - .media-menu .artist { font-size: var(--font-size-body); color: var(--color-text-secondary); @@ -825,15 +1130,19 @@ margin-bottom: var(--space-4); } -*.dark .media-menu .artist { - color: var(--color-dark-text-secondary); -} - .media-menu .source { font-size: var(--font-size-caption); color: var(--color-text-tertiary); } +*.dark .media-menu .title { + color: var(--color-dark-text-primary); +} + +*.dark .media-menu .artist { + color: var(--color-dark-text-secondary); +} + *.dark .media-menu .source { color: var(--color-dark-text-tertiary); } @@ -906,7 +1215,7 @@ .media-menu .playback-time { font-size: var(--font-size-caption); - font-family: var(--font-mono); + font-family: var(--font-text); color: var(--color-text-tertiary); margin-top: var(--space-16); min-width: 100px; @@ -917,42 +1226,48 @@ } .media-menu .progress-slider { - height: var(--space-16); - margin: var(--space-4); border-radius: var(--radius-small); + min-height: 20px; + margin: var(--space-4) 0; + background-color: transparent; } -.media-menu .progress-slider::groove { - background-color: var(--color-surface-tertiary); - height: var(--space-4); - border-radius: var(--radius-small); +.media-menu .progress-slider::groove:horizontal { + height: 4px; + background-color: rgba(0, 0, 0, 0.35); + border: none; + border-radius: 2px; } -*.dark .media-menu .progress-slider::groove { - background-color: var(--color-dark-surface-tertiary); +*.dark .media-menu .progress-slider::groove:horizontal { + background-color: rgba(255, 255, 255, 0.3); } -.media-menu .progress-slider::groove:hover { - height: var(--space-6); - background-color: var(--color-surface-secondary); +.media-menu .progress-slider::sub-page:horizontal { + height: var(--space-4); + background-color: var(--color-accent-default); + border-radius: 2px; } -*.dark .media-menu .progress-slider::groove:hover { - background-color: var(--color-dark-surface-secondary); +*.dark .media-menu .progress-slider::sub-page:horizontal { + background-color: var(--color-dark-accent-default); } -.media-menu .progress-slider::sub-page { +.media-menu .progress-slider::handle:horizontal { + width: 6px; + height: 6px; + margin: -4px 0; + border: 3px solid #ffffff; + border-radius: 6px; background-color: var(--color-accent-default); - border-radius: var(--radius-small); - height: var(--space-4); } -*.dark .media-menu .progress-slider::sub-page { +*.dark .media-menu .progress-slider::handle:horizontal { background-color: var(--color-dark-accent-default); } /* ---------------------------------------------------------------------------- - CPU Widget + CPU ---------------------------------------------------------------------------- */ .cpu-widget { cursor: crosshair; @@ -962,57 +1277,13 @@ padding: 0; } -.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); -} - -*.dark .cpu-widget .widget-container .label { - color: var(--color-dark-text-secondary); -} - -/* ---------------------------------------------------------------------------- - 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); -} - -*.dark .gpu-widget .widget-container .label { - color: var(--color-dark-text-secondary); -} - /* ---------------------------------------------------------------------------- - Memory Widget + Memory ---------------------------------------------------------------------------- */ -.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); -} - -*.dark .memory-widget .widget-container .label { - color: var(--color-dark-text-secondary); -} - .memory-widget .widget-container .label.status-low { color: var(--color-success); } + *.dark .memory-widget .widget-container .label.status-low { color: var(--color-dark-success); } @@ -1020,6 +1291,7 @@ .memory-widget .widget-container .label.status-medium { color: var(--color-warning); } + *.dark .memory-widget .widget-container .label.status-medium { color: var(--color-dark-warning); } @@ -1027,6 +1299,7 @@ .memory-widget .widget-container .label.status-high { color: var(--color-accent-default); } + *.dark .memory-widget .widget-container .label.status-high { color: var(--color-dark-accent-default); } @@ -1034,37 +1307,36 @@ .memory-widget .widget-container .label.status-critical { color: var(--color-error); } + *.dark .memory-widget .widget-container .label.status-critical { color: var(--color-dark-error); } -.memory-widget .progress-circle { - margin-right: var(--space-8); -} - /* ---------------------------------------------------------------------------- - Traffic Widget + Traffic ---------------------------------------------------------------------------- */ -.traffic-widget { - width: 200px; - min-width: 200px; - max-width: 200px; -} - -.traffic-widget .download { - color: var(--color-traffic-download); +.traffic-widget .download, +.traffic-widget .upload { font-family: var(--font-mono); font-weight: var(--font-weight-semibold); } -*.dark .traffic-widget .download { - color: var(--color-dark-traffic-download); +.traffic-widget .download { + color: var(--color-traffic-download); } .traffic-widget .upload { color: var(--color-traffic-upload); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); +} + +.traffic-widget { + width: 200px; + min-width: 200px; + max-width: 200px; +} + +*.dark .traffic-widget .download { + color: var(--color-dark-traffic-download); } *.dark .traffic-widget .upload { @@ -1122,7 +1394,6 @@ border: 1px solid var(--color-dark-stroke-control-default); } -/* Speed column styles */ .traffic-menu .download-speed, .traffic-menu .upload-speed { background-color: transparent; @@ -1177,7 +1448,6 @@ color: var(--color-dark-text-tertiary); } -/* Section and data styles */ .traffic-menu .section-title { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); @@ -1218,7 +1488,6 @@ color: var(--color-dark-text-primary); } -/* Interface and Internet info styles */ .traffic-menu .interface-info { margin-top: var(--space-8); border-top: 1px solid var(--color-stroke-divider); @@ -1252,260 +1521,116 @@ } *.dark .traffic-menu .internet-info.connected { - background-color: var(--color-dark-success-bg); - color: var(--color-dark-success); -} - -.traffic-menu .internet-info.disconnected { - background-color: var(--color-error-bg); - color: var(--color-error); - padding: var(--space-4) var(--space-8); - border-radius: var(--radius-small); -} - -*.dark .traffic-menu .internet-info.disconnected { - background-color: var(--color-dark-error-bg); - color: var(--color-dark-error); -} - -/* ---------------------------------------------------------------------------- - Disk Widget - ---------------------------------------------------------------------------- */ -.disk-widget .widget-container .icon { - font-family: var(--font-icon-2); - font-size: var(--font-size-body); -} - -.disk-widget .widget-container .label { - color: var(--color-text-secondary); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); -} - -*.dark .disk-widget .widget-container .label { - color: var(--color-dark-text-secondary); -} - -.disk-group { - background-color: var(--color-background-elevated); - border: 1px solid var(--color-stroke-surface); - border-radius: var(--radius-medium); - padding: var(--space-8); -} - -*.dark .disk-group { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); -} - -.disk-group-row { - min-width: 250px; - max-width: 300px; - min-height: var(--height-item-md); - max-height: var(--height-item-md); - margin: 0; - padding: var(--space-12); - 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); -} - -*.dark .disk-group-row:hover { - background-color: var(--color-dark-subtle-fill-hover); - border: 1px solid var(--color-dark-stroke-control-default); -} - -.disk-group-label-bar { - margin-bottom: var(--space-8); - max-height: var(--space-6); - border: 0px solid transparent; - background-color: var(--color-surface-secondary); - border-radius: var(--radius-small); -} - -*.dark .disk-group-label-bar { - background-color: var(--color-dark-surface-secondary); -} - -.disk-group-label-bar::chunk { - background-color: var(--color-success); - border-radius: var(--radius-small); -} - -*.dark .disk-group-label-bar::chunk { - background-color: var(--color-dark-success); -} - -.disk-group-label { - font-size: var(--font-size-body); - color: var(--color-text-primary); -} - -*.dark .disk-group-label { - color: var(--color-dark-text-primary); -} - -.disk-group-label-size { - font-size: var(--font-size-body); - color: var(--color-text-secondary); -} - -*.dark .disk-group-label-size { - color: var(--color-dark-text-secondary); -} - -/* ---------------------------------------------------------------------------- - Microphone Widget - ---------------------------------------------------------------------------- */ -.microphone-widget .icon { - font-family: var(--font-icon); - font-size: var(--font-size-body); - padding-left: var(--space-4); -} - -.microphone-widget .widget-container .label { - color: var(--color-text-secondary); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); -} - -*.dark .microphone-widget .widget-container .label { - color: var(--color-dark-text-secondary); -} - -.microphone-menu { - background-color: var(--color-background-elevated); - border: 1px solid var(--color-stroke-surface); - border-radius: var(--radius-medium); - min-width: var(--width-menu-md); - padding: var(--space-8); -} - -*.dark .microphone-menu { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); -} - -.microphone-menu .system-volume-container .volume-slider { - border: none; -} - -.microphone-menu .microphone-container .device { - background-color: transparent; - border: none; - padding: var(--space-4) var(--space-8); - margin: var(--space-2) 0; - font-size: var(--font-size-body); - color: var(--color-text-secondary); - border-radius: var(--radius-small); -} - -*.dark .microphone-menu .microphone-container .device { - color: var(--color-dark-text-secondary); -} - -.microphone-menu .microphone-container .device:hover { - background-color: var(--color-subtle-fill-hover); - color: var(--color-text-primary); -} - -*.dark .microphone-menu .microphone-container .device:hover { - background-color: var(--color-dark-subtle-fill-hover); - color: var(--color-dark-text-primary); + background-color: var(--color-dark-success-bg); + color: var(--color-dark-success); } -.microphone-menu .microphone-container .device.selected { - background-color: var(--color-subtle-fill-rest); - color: var(--color-text-primary); +.traffic-menu .internet-info.disconnected { + background-color: var(--color-error-bg); + color: var(--color-error); + padding: var(--space-4) var(--space-8); + border-radius: var(--radius-small); } -*.dark .microphone-menu .microphone-container .device.selected { - background-color: var(--color-dark-subtle-fill-rest); - color: var(--color-dark-text-primary); +*.dark .traffic-menu .internet-info.disconnected { + background-color: var(--color-dark-error-bg); + color: var(--color-dark-error); } /* ---------------------------------------------------------------------------- - Volume Widget + Disks ---------------------------------------------------------------------------- */ -.volume-widget .icon { - font-family: var(--font-icon); +.disk-widget .widget-container .icon { + font-family: var(--font-icon-2); font-size: var(--font-size-body); - padding-left: var(--space-4); -} - -.volume-widget .widget-container .label { - color: var(--color-text-secondary); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); -} - -*.dark .volume-widget .widget-container .label { - color: var(--color-dark-text-secondary); } -.audio-menu { +.disk-group { background-color: var(--color-background-elevated); border: 1px solid var(--color-stroke-surface); border-radius: var(--radius-medium); - min-width: var(--width-menu-md); padding: var(--space-8); } -*.dark .audio-menu { +*.dark .disk-group { background-color: var(--color-dark-background-elevated); border: 1px solid var(--color-dark-stroke-surface); } -.audio-menu .system-volume-container .volume-slider { - border: none; +.disk-group-row { + min-width: 250px; + max-width: 300px; + min-height: var(--height-item-md); + max-height: var(--height-item-md); + margin: 0; + padding: var(--space-12); + border-radius: var(--radius-medium); + border: 1px solid transparent; } -.audio-menu .audio-container .device { - background-color: transparent; - border: none; - padding: var(--space-4) var(--space-8); - margin: var(--space-2) 0; - font-size: var(--font-size-body); - color: var(--color-text-secondary); +.disk-group-row:hover { + background-color: var(--color-subtle-fill-hover); + border: 1px solid var(--color-stroke-control-default); +} + +*.dark .disk-group-row:hover { + background-color: var(--color-dark-subtle-fill-hover); + border: 1px solid var(--color-dark-stroke-control-default); +} + +.disk-group-label-bar { + margin-bottom: var(--space-8); + max-height: var(--space-6); + border: 0px solid transparent; + background-color: var(--color-surface-secondary); border-radius: var(--radius-small); } -*.dark .audio-menu .audio-container .device { - color: var(--color-dark-text-secondary); +*.dark .disk-group-label-bar { + background-color: var(--color-dark-surface-secondary); } -.audio-menu .audio-container .device:hover { - background-color: var(--color-subtle-fill-hover); - color: var(--color-text-primary); +.disk-group-label-bar::chunk { + background-color: var(--color-success); + border-radius: var(--radius-small); } -*.dark .audio-menu .audio-container .device:hover { - background-color: var(--color-dark-subtle-fill-hover); - color: var(--color-dark-text-primary); +*.dark .disk-group-label-bar::chunk { + background-color: var(--color-dark-success); } -.audio-menu .audio-container .device.selected { - background-color: var(--color-subtle-fill-rest); +.disk-group-label { + font-size: var(--font-size-body); color: var(--color-text-primary); } -*.dark .audio-menu .audio-container .device.selected { - background-color: var(--color-dark-subtle-fill-rest); +*.dark .disk-group-label { color: var(--color-dark-text-primary); } +.disk-group-label-size { + font-size: var(--font-size-body); + color: var(--color-text-secondary); +} + +*.dark .disk-group-label-size { + color: var(--color-dark-text-secondary); +} + +/* ---------------------------------------------------------------------------- + Volume and app mixer + ---------------------------------------------------------------------------- */ .audio-menu .toggle-apps { background-color: transparent; border: none; - padding: var(--space-4); - margin: 0; + padding: 0; + margin: 0 0 0 var(--space-8); min-height: var(--size-icon-btn); + max-height: var(--size-icon-btn); min-width: var(--size-icon-btn); + max-width: var(--size-icon-btn); border-radius: var(--radius-small); + font-family: var(--font-icon); } .audio-menu .toggle-apps:hover { @@ -1554,82 +1679,94 @@ background-color: var(--color-dark-subtle-fill-hover); } -/* ---------------------------------------------------------------------------- - Brightness Widget - ---------------------------------------------------------------------------- */ -.brightness-widget .widget-container .icon { - font-family: var(--font-icon); - padding-left: var(--space-4); +*.dark .audio-menu .apps-container .app-label { + color: var(--color-dark-text-secondary); +} + +.audio-menu .apps-container .app-volume { + margin: var(--space-4) 0; } -.brightness-widget .widget-container .label { +.audio-menu .apps-container .app-label { + font-family: var(--font-text); color: var(--color-text-secondary); - font-family: var(--font-mono); font-weight: var(--font-weight-semibold); + margin-bottom: var(--space-2); } -*.dark .brightness-widget .widget-container .label { - color: var(--color-dark-text-secondary); +.audio-menu .app-slider::handle:horizontal:disabled { + background-color: var(--color-text-disabled); + border-color: var(--color-background-base); } -.brightness-menu { - background-color: var(--color-background-elevated); - border: 1px solid var(--color-stroke-surface); - border-radius: var(--radius-medium); - min-width: var(--width-menu-md); - padding: var(--space-8); +*.dark .audio-menu .app-slider::handle:horizontal:disabled { + background-color: var(--color-dark-text-disabled); + border-color: var(--color-dark-background-base); } -*.dark .brightness-menu { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); +/* ---------------------------------------------------------------------------- + Brightness + ---------------------------------------------------------------------------- */ +.brightness-menu { + min-width: 300px; + max-width: 340px; } -.brightness-menu .slider-container { - padding: var(--space-4); +.brightness-menu .monitor-row { + margin: 10px; } -/* ---------------------------------------------------------------------------- - WiFi Widget - ---------------------------------------------------------------------------- */ -.wifi-widget .widget-container .icon { - font-family: var(--font-icon); - padding-left: var(--space-4); +.brightness-menu .monitor-title { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); + margin: 0; } -.wifi-widget .widget-container .label { +.brightness-menu .monitor-subtitle { + font-size: var(--font-size-body); color: var(--color-text-secondary); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); + margin: var(--space-4) 0 var(--space-8) 0; } -*.dark .wifi-widget .widget-container .label { +*.dark .brightness-menu .monitor-subtitle { color: var(--color-dark-text-secondary); } -/* Menu Container */ -.wifi-menu { - font-family: var(--font-primary); - background-color: var(--color-background-elevated); - border: 1px solid var(--color-stroke-surface); +.brightness-menu .slider-rows { + background-color: var(--color-surface-secondary); + border: 1px solid var(--color-stroke-control-default); border-radius: var(--radius-medium); - min-height: 400px; - max-height: 450px; - min-width: var(--width-menu-lg); padding: var(--space-8); } -*.dark .wifi-menu { - background-color: var(--color-dark-background-elevated); - border: 1px solid var(--color-dark-stroke-surface); +*.dark .brightness-menu .slider-rows { + background-color: var(--color-dark-surface-secondary); + border-color: var(--color-dark-stroke-control-default); } -/* Header */ -.wifi-menu .header { +.brightness-menu .slider-row { + padding: 0; +} + +.brightness-menu .slider-icon { + font-family: var(--font-icon); font-size: var(--font-size-subtitle); - font-weight: var(--font-weight-bold); - margin-bottom: var(--space-8); - padding: var(--space-8); + font-weight: var(--font-weight-regular); + min-width: 24px; + margin-right: var(--space-4); +} + +/* ---------------------------------------------------------------------------- + Wi-Fi + ---------------------------------------------------------------------------- */ +.wifi-menu { + font-family: var(--font-primary); + min-height: 280px; + max-height: 400px; +} + +.wifi-menu .header { + margin-bottom: 0; background-color: transparent; color: var(--color-text-primary); border-bottom: 1px solid var(--color-stroke-divider); @@ -1640,47 +1777,20 @@ border-bottom: 1px solid var(--color-dark-stroke-divider); } -/* WiFi List */ .wifi-menu .wifi-list { background-color: transparent; margin: var(--space-2); } -/* WiFi Item */ -.wifi-menu .wifi-item { - min-height: var(--height-item-md); - padding: var(--space-4) var(--space-12); - margin: var(--space-2) 0; - border-radius: var(--radius-small); - border: 1px solid transparent; -} - -.wifi-menu .wifi-item:hover { - background-color: var(--color-subtle-fill-hover); - border-color: var(--color-stroke-control-default); -} - -*.dark .wifi-menu .wifi-item:hover { - background-color: var(--color-dark-subtle-fill-hover); - border-color: var(--color-dark-stroke-control-default); -} - .wifi-menu .wifi-item[active="true"] { - background-color: var(--color-subtle-fill-rest); border: 1px solid var(--color-accent-default); - min-height: var(--height-item-lg); } *.dark .wifi-menu .wifi-item[active="true"] { - background-color: var(--color-dark-subtle-fill-rest); border: 1px solid var(--color-dark-accent-default); } -/* Item Text & Icons */ .wifi-menu .wifi-item .icon { - font-family: var(--font-icon); - font-size: var(--font-size-title); - margin-right: var(--space-12); color: var(--color-text-secondary); } @@ -1689,8 +1799,6 @@ } .wifi-menu .wifi-item .name { - font-size: var(--font-size-body-strong); - font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } @@ -1698,211 +1806,201 @@ color: var(--color-dark-text-primary); } -.wifi-menu .wifi-item .status { +.wifi-menu .footer { font-size: var(--font-size-caption); color: var(--color-text-tertiary); + background-color: transparent; } -*.dark .wifi-menu .wifi-item .status { +*.dark .wifi-menu .footer { color: var(--color-dark-text-tertiary); + border-top: 1px solid var(--color-dark-stroke-divider); } -/* Connect Button */ -.wifi-menu .wifi-item .connect { - background-color: var(--color-accent-default); - color: white; - padding: var(--space-4) var(--space-16); - border-radius: var(--radius-small); - border: none; - font-weight: var(--font-weight-semibold); - margin-top: var(--space-8); +.wifi-menu .wifi-item .strength { + color: var(--color-text-secondary); + font-size: var(--font-size-body); } -*.dark .wifi-menu .wifi-item .connect { - background-color: var(--color-dark-accent-default); - color: black; +*.dark .wifi-menu .wifi-item .strength { + color: var(--color-dark-text-secondary); } -.wifi-menu .wifi-item .connect:hover { - background-color: var(--color-accent-secondary); +/* ---------------------------------------------------------------------------- + Bluetooth + ---------------------------------------------------------------------------- */ +.bluetooth-widget .icon.bt-off, +.bluetooth-widget .label.bt-off { + color: var(--color-text-disabled); } -/* Footer */ -.wifi-menu .footer { - font-size: var(--font-size-caption); - padding: var(--space-8); - margin-top: var(--space-8); - color: var(--color-text-tertiary); - background-color: transparent; - border-top: 1px solid var(--color-stroke-divider); - display: flex; - justify-content: space-between; +*.dark .bluetooth-widget .icon.bt-off, +*.dark .bluetooth-widget .label.bt-off { + color: var(--color-dark-text-disabled); } -*.dark .wifi-menu .footer { - color: var(--color-dark-text-tertiary); - border-top: 1px solid var(--color-dark-stroke-divider); +.bluetooth-widget .icon.bt-connected { + color: var(--color-accent-default); } -.wifi-menu .footer .refresh-icon { - font-family: var(--font-icon); +*.dark .bluetooth-widget .icon.bt-connected { + color: var(--color-dark-accent-default); +} + +.bluetooth-menu { + min-height: 240px; + max-height: 460px; +} + +.bluetooth-menu .bluetooth-list { background-color: transparent; border: none; - font-size: var(--font-size-subtitle); - color: var(--color-text-primary); + margin: var(--space-2); } -*.dark .wifi-menu .footer .refresh-icon { - color: var(--color-dark-text-primary); +.bluetooth-menu .section { + background-color: transparent; + border: none; } -.wifi-menu .footer .refresh-icon:hover { - color: var(--color-accent-default); +.bluetooth-menu .header { + padding: 0; + border-bottom: 1px solid var(--color-stroke-divider); +} + +*.dark .bluetooth-menu .header { + border-color: var(--color-dark-stroke-divider); +} + +.bluetooth-menu .header .title { + margin: 0; +} + +.bluetooth-menu .header .power-button { + margin-right: var(--space-12); + padding: var(--space-4) var(--space-16); + border: 1px solid var(--color-stroke-control-default); + border-radius: var(--radius-small); + background-color: var(--color-subtle-fill-rest); +} + +.bluetooth-menu .header .power-button:checked { + background-color: var(--color-accent-default); + color: white; +} + +*.dark .bluetooth-menu .header .power-button { + border-color: var(--color-dark-stroke-control-default); + background-color: var(--color-dark-subtle-fill-rest); } -/* ---------------------------------------------------------------------------- - Bluetooth Widget - ---------------------------------------------------------------------------- */ -.bluetooth-widget .widget-container .icon { - font-family: var(--font-icon); - font-size: var(--font-size-body); - padding-left: var(--space-4); +*.dark .bluetooth-menu .header .power-button:checked { + background-color: var(--color-dark-accent-default); + color: #1a1a1a; } -.bluetooth-widget .widget-container .label { +.bluetooth-menu .section-title { + padding: var(--space-12) var(--space-12) var(--space-4) var(--space-12); color: var(--color-text-secondary); - font-family: var(--font-text); font-weight: var(--font-weight-semibold); } -*.dark .bluetooth-widget .widget-container .label { +*.dark .bluetooth-menu .section-title { color: var(--color-dark-text-secondary); } -/* --- Bluetooth States --- */ - -/* OFF */ -.bluetooth-widget.bluetooth-off .widget-container .icon { - color: var(--color-text-disabled); -} -*.dark .bluetooth-widget.bluetooth-off .widget-container .icon { - color: var(--color-dark-text-disabled); -} - -/* ON */ -.bluetooth-widget.bluetooth-on .widget-container .icon { - color: var(--color-accent-default); -} -*.dark .bluetooth-widget.bluetooth-on .widget-container .icon { - color: var(--color-dark-accent-default); +.bluetooth-menu .bluetooth-item.active { + border-color: var(--color-accent-default); } -/* CONNECTED */ -.bluetooth-widget.bluetooth-connected .widget-container .icon { - color: var(--color-accent-default); -} -.bluetooth-widget.bluetooth-connected .widget-container .label { - color: var(--color-text-primary); +*.dark .bluetooth-menu .bluetooth-item.active { + border-color: var(--color-dark-accent-default); } -*.dark .bluetooth-widget.bluetooth-connected .widget-container .icon { - color: var(--color-dark-accent-default); -} -*.dark .bluetooth-widget.bluetooth-connected .widget-container .label { - color: var(--color-dark-text-primary); +.bluetooth-menu .bluetooth-item .icon { + font-weight: var(--font-weight-regular); + min-width: 24px; } -/* ---------------------------------------------------------------------------- - Battery Widget - ---------------------------------------------------------------------------- */ -.battery-widget .widget-container .icon { +.bluetooth-menu .bluetooth-item .battery-icon { font-family: var(--font-icon); - font-size: var(--font-size-body); - padding-left: var(--space-4); + font-size: var(--font-size-title); + font-weight: var(--font-weight-regular); + min-width: 24px; + margin-right: var(--space-12); } -.battery-widget .widget-container .label { +.bluetooth-menu .bluetooth-item .battery { color: var(--color-text-secondary); - font-family: var(--font-mono); - font-weight: var(--font-weight-semibold); } -*.dark .battery-widget .widget-container .label { +*.dark .bluetooth-menu .bluetooth-item .battery { color: var(--color-dark-text-secondary); } -/* --- Battery States --- */ +.bluetooth-menu .bluetooth-item .controls-container { + padding: 0; +} + +*.dark .bluetooth-menu .footer { + border-color: var(--color-dark-stroke-divider); +} -/* Critical (Red) */ +/* ---------------------------------------------------------------------------- + Battery + ---------------------------------------------------------------------------- */ .battery-widget .widget-container .icon.status-critical { color: var(--color-error); } + *.dark .battery-widget .widget-container .icon.status-critical { color: var(--color-dark-error); } -/* Low (Orange/Warning) */ .battery-widget .widget-container .icon.status-low { color: var(--color-warning); } + *.dark .battery-widget .widget-container .icon.status-low { color: var(--color-dark-warning); } -/* Medium (Standard Text Color) */ .battery-widget .widget-container .icon.status-medium { color: var(--color-text-secondary); } + *.dark .battery-widget .widget-container .icon.status-medium { color: var(--color-dark-text-secondary); } -/* High/Full (Green) */ .battery-widget .widget-container .icon.status-high, .battery-widget .widget-container .icon.status-full { - color: var(--color-success); + color: var(--color-text-secondary); } + *.dark .battery-widget .widget-container .icon.status-high, *.dark .battery-widget .widget-container .icon.status-full { - color: var(--color-dark-success); + color: var(--color-dark-text-secondary); } -/* Charging (Accent Blue) */ .battery-widget .widget-container .icon.status-charging { color: var(--color-accent-default); } + *.dark .battery-widget .widget-container .icon.status-charging { color: var(--color-dark-accent-default); } -/* Charging Animation */ -@keyframes blink { - 0% { - opacity: 1; - } - 50% { - opacity: 0.4; - } - 100% { - opacity: 1; - } -} - -.battery-widget .widget-container .icon.status-charging.blink { - animation: blink 2s infinite ease-in-out; -} - /* ---------------------------------------------------------------------------- - Clock Widget + Clock and calendar ---------------------------------------------------------------------------- */ -.clock-widget .widget-container { - background-color: transparent; - border: transparent; -} - -.clock-widget .widget-container .icon { - margin-right: var(--space-8); - padding-left: var(--space-4); +.calendar .day-label, +.calendar .month-label, +.calendar .date-label { + font-family: var(--font-primary); + color: var(--color-text-primary); + min-width: var(--width-menu-sm); + max-width: var(--width-menu-sm); } .clock-widget .label { @@ -1911,39 +2009,42 @@ font-weight: var(--font-weight-regular); } -/* ---------------------------------------------------------------------------- - Calendar Flyout - ---------------------------------------------------------------------------- */ -.calendar { - padding: var(--space-12); - border: 1px solid var(--color-stroke-surface); - border-radius: var(--radius-medium); - background-color: var(--color-background-elevated); +.clock-widget .widget-container { + background-color: transparent; + border: transparent; } -*.dark .calendar { - border: 1px solid var(--color-dark-stroke-surface); - background-color: var(--color-dark-background-elevated); +.clock-widget .widget-container .icon { + margin-right: var(--space-8); + padding-left: var(--space-4); } .calendar .calendar-table::item:selected { background-color: var(--color-accent-default); - color: var(--color-background-base); - border-radius: var(--radius-small); + color: #ffffff; } *.dark .calendar .calendar-table::item:selected { background-color: var(--color-dark-accent-default); - color: var(--color-dark-background-base); + color: #1a1a1a; +} + +.calendar .day-label { + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-semibold); + margin-top: var(--space-8); +} + +.calendar .month-label { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); + margin-top: var(--space-16); } -.calendar .day-label, -.calendar .month-label, .calendar .date-label { - font-family: var(--font-primary); - color: var(--color-text-primary); - min-width: var(--width-menu-sm); - max-width: var(--width-menu-sm); + font-size: var(--font-size-display); + font-weight: var(--font-weight-bold); + margin-top: -var(--space-8); } *.dark .calendar .day-label, @@ -1952,55 +2053,253 @@ color: var(--color-dark-text-primary); } -.calendar .month-label { - font-size: var(--font-size-body-strong); - font-weight: var(--font-weight-semibold); - margin-top: var(--space-16); +.calendar QCalendarWidget { + min-width: 280px; + max-width: 280px; +} + +.calendar .calendar-table { + background: qlineargradient( + x1: 0, + y1: 0, + x2: 1, + y2: 0, + stop: 0 rgba(0, 0, 0, 0.025), + stop: 0.1428 rgba(0, 0, 0, 0.025), + stop: 0.1429 transparent, + stop: 0.8571 transparent, + stop: 0.8572 rgba(0, 0, 0, 0.025), + stop: 1 rgba(0, 0, 0, 0.025) + ); + background-origin: content; + background-clip: content; + alternate-background-color: transparent; + border: none; + border-left: 1px solid var(--color-stroke-divider); + margin-left: var(--space-8); + padding-left: var(--space-12); + outline: none; } -.calendar .day-label { - font-size: var(--font-size-subtitle); - font-weight: var(--font-weight-semibold); - margin-top: var(--space-8); +*.dark .calendar .calendar-table { + background: qlineargradient( + x1: 0, + y1: 0, + x2: 1, + y2: 0, + stop: 0 rgba(255, 255, 255, 0.035), + stop: 0.1428 rgba(255, 255, 255, 0.035), + stop: 0.1429 transparent, + stop: 0.8571 transparent, + stop: 0.8572 rgba(255, 255, 255, 0.035), + stop: 1 rgba(255, 255, 255, 0.035) + ); + border-left-color: var(--color-dark-stroke-divider); } -.calendar .date-label { - font-size: var(--font-size-display); - font-weight: var(--font-weight-bold); - margin-top: -var(--space-8); +.calendar .calendar-table::item { + background-color: transparent; + border: none; + border-radius: var(--radius-small); } /* ---------------------------------------------------------------------------- - Weather Widget + Weather ---------------------------------------------------------------------------- */ -.weather-widget .widget-container { +.open-meteo-card { + min-width: 520px; + max-width: 600px; +} + +.open-meteo-widget .widget-container { background-color: transparent; - border: transparent; + border: none; } -.weather-widget .widget-container .icon { +.open-meteo-widget .icon { + font-family: var(--font-icon-2); margin-right: var(--space-8); padding-left: var(--space-4); } -.weather-widget .label { +.open-meteo-widget .label { font-family: var(--font-text); font-size: var(--font-size-body-strong); font-weight: var(--font-weight-regular); } -/* ---------------------------------------------------------------------------- - Power Menu Widget - ---------------------------------------------------------------------------- */ -.power-menu-widget .widget-container { +.open-meteo-card-today { + padding: var(--space-8); +} + +.open-meteo-card-today .label { + color: var(--color-text-secondary); + font-size: var(--font-size-body); +} + +*.dark .open-meteo-card-today .label { + color: var(--color-dark-text-secondary); +} + +.open-meteo-card-today .label.location { + font-size: var(--font-size-title); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-8); +} + +*.dark .open-meteo-card-today .label.location { + color: var(--color-dark-text-primary); +} + +.open-meteo-card-today .label.sunrisesunset-icon { + font-family: var(--font-icon-2); +} + +.open-meteo-card-today .label.sunrisesunset { + color: var(--color-text-secondary); + margin-top: var(--space-8); +} + +*.dark .open-meteo-card-today .label.sunrisesunset { + color: var(--color-dark-text-secondary); +} + +.open-meteo-card-day { + border: 1px solid var(--color-stroke-control-default); + border-radius: var(--radius-medium); + background-color: var(--color-surface-secondary); + padding: var(--space-4); + min-width: 56px; +} + +*.dark .open-meteo-card-day { + border-color: var(--color-dark-stroke-control-default); + background-color: var(--color-dark-surface-secondary); +} + +.open-meteo-card-day:hover, +.open-meteo-card-day.active { + background-color: var(--color-subtle-fill-hover); + border-color: var(--color-accent-default); +} + +*.dark .open-meteo-card-day:hover, +*.dark .open-meteo-card-day.active { + background-color: var(--color-dark-subtle-fill-hover); + border-color: var(--color-dark-accent-default); +} + +.open-meteo-card-day .day-name, +.open-meteo-card-day .day-temp-min { + color: var(--color-text-secondary); + font-size: var(--font-size-body); +} + +*.dark .open-meteo-card-day .day-name, +*.dark .open-meteo-card-day .day-temp-min { + color: var(--color-dark-text-secondary); +} + +.open-meteo-card-day .day-temp-max { + font-size: var(--font-size-body-strong); + font-weight: var(--font-weight-semibold); +} + +.open-meteo-card .hourly-container { + min-height: 120px; background-color: transparent; - border: 0; + border: none; } -.power-menu-widget .widget-container:hover { +.open-meteo-card .hourly-data { + font-family: var(--font-text); + font-size: var(--font-size-body); +} + +.open-meteo-card .hourly-data.temperature { + background-color: var(--color-accent-default); +} + +*.dark .open-meteo-card .hourly-data.temperature { + background-color: var(--color-dark-accent-default); +} + +.open-meteo-card .hourly-data.rain { + background-color: #4a90e2; +} + +.open-meteo-card .hourly-data.snow { + background-color: #a0c4ff; +} + +.open-meteo-card .search-head { + font-size: var(--font-size-subtitle); + font-weight: var(--font-weight-semibold); + padding-bottom: var(--space-8); +} + +.open-meteo-card .search-description, +.open-meteo-card .no-data-text { + color: var(--color-text-secondary); + padding-bottom: var(--space-12); +} + +*.dark .open-meteo-card .search-description, +*.dark .open-meteo-card .no-data-text { + color: var(--color-dark-text-secondary); +} + +.open-meteo-card .no-data-icon { + font-size: var(--font-size-display); + font-family: var(--font-icon-2); +} + +.open-meteo-card .search-input { + padding: var(--space-8) var(--space-12); + border: 1px solid var(--color-stroke-control-default); + border-bottom: 2px solid var(--color-text-tertiary); + border-radius: var(--radius-small); + background-color: var(--color-surface-secondary); +} + +*.dark .open-meteo-card .search-input { + border-color: var(--color-dark-stroke-control-default); + border-bottom-color: var(--color-dark-text-tertiary); + background-color: var(--color-dark-surface-secondary); +} + +.open-meteo-card .search-input:focus { + border-bottom-color: var(--color-accent-default); +} + +*.dark .open-meteo-card .search-input:focus { + border-bottom-color: var(--color-dark-accent-default); +} + +.open-meteo-card .search-results { background-color: transparent; + border: none; } +.open-meteo-card .search-results::item { + padding: var(--space-8); + border-radius: var(--radius-small); +} + +.open-meteo-card .search-results::item:hover, +.open-meteo-card .search-results::item:selected { + background-color: var(--color-subtle-fill-hover); +} + +*.dark .open-meteo-card .search-results::item:hover, +*.dark .open-meteo-card .search-results::item:selected { + background-color: var(--color-dark-subtle-fill-hover); +} + +/* ---------------------------------------------------------------------------- + Power menu + ---------------------------------------------------------------------------- */ .power-menu-widget .label { font-family: var(--font-icon); font-size: var(--font-size-body); @@ -2031,14 +2330,11 @@ height: var(--height-item-lg); padding: var(--space-12); margin: var(--space-4); - background-color: var(--color-dark-subtle-fill-rest); border: 1px solid var(--color-dark-stroke-control-default); border-radius: var(--radius-medium); - color: var(--color-dark-text-primary); font-family: var(--font-primary); - cursor: pointer; } @@ -2048,7 +2344,7 @@ border-color: var(--color-dark-stroke-focus); } -.power-menu-popup .button:active { +.power-menu-popup .button:pressed { background-color: var(--color-dark-subtle-fill-pressed); } @@ -2058,6 +2354,7 @@ color: var(--color-dark-text-primary); margin-bottom: var(--space-4); } + .power-menu-popup .button .icon { font-size: var(--font-size-icon-large); color: var(--color-dark-text-tertiary); diff --git a/modules/shell/shell.nix b/modules/shell/shell.nix @@ -90,8 +90,8 @@ in { bindkey '^[[1;5D' backward-word bindkey '^[[3;5~' kill-word bindkey '^[[3~' delete-char - bindkey "^[[5~" beginning-of-history - bindkey "^[[6~" end-of-history + bindkey '^[[5~' beginning-of-history + bindkey '^[[6~' end-of-history bindkey '^[[A' up-line-or-search bindkey '^[[B' down-line-or-search bindkey '^[[C' forward-char
