From 4116241b43b6557e19feac4bf03c1cb1792f1dae Mon Sep 17 00:00:00 2001 From: SDGDen Date: Wed, 3 Jun 2026 14:51:49 +0200 Subject: [PATCH] update --- TODO.md | 24 +- chocoinstall.ps1 | 4 +- yasb/config.yaml | 523 ++++++----------- yasb/styles.css | 1450 +++++++++++++++++++++++++++++++++------------- 4 files changed, 1253 insertions(+), 748 deletions(-) diff --git a/TODO.md b/TODO.md index 8478520..bd793bb 100644 --- a/TODO.md +++ b/TODO.md @@ -1,17 +1,27 @@ window manager: -pick glaze, komorebi or fancyWM. > glaze +v pick glaze, komorebi or fancyWM. > glaze -bar: keep bottom bar because windows, also keep the regular start menu but debloat it. +v bar: keep bottom bar because windows, also keep the regular start menu but debloat it. -binds: autohotkey, win-hypr-switcher +v binds: autohotkey, win-hypr-switcher -term: get a better terminal with powershell 7 +v term: get a better terminal with powershell 7 -term improvements: see if the same type of features that are on my linux terms can be on powershell 7. +v term improvements: see if the same type of features that are on my linux terms can be on powershell 7. -software: install chocolatey at the very least, maybe also fzf and make a lil tui for it. +v software: install chocolatey at the very least, maybe also fzf and make a lil tui for it. + +v debloat with winhance + + + +configure powershell 7 profile +configure starship +configure fastfetch +configure eza/zoxide/fzf + +export powershell 7 and windows terminal settings -debloat with winhance diff --git a/chocoinstall.ps1 b/chocoinstall.ps1 index 659bd63..0bb17c7 100644 --- a/chocoinstall.ps1 +++ b/chocoinstall.ps1 @@ -1,3 +1,5 @@ -choco install -y glazewm yasb \ No newline at end of file +choco install -y glazewm yasb pwsh fastfetch starship fzf eza zoxide yazi + + diff --git a/yasb/config.yaml b/yasb/config.yaml index a3cacc5..b3f65a2 100644 --- a/yasb/config.yaml +++ b/yasb/config.yaml @@ -1,13 +1,7 @@ -# This is default and very simple configuration file for Yasb. -# For more information about configuration options, please visit the Wiki https://github.com/amnweb/yasb/wiki watch_stylesheet: true watch_config: true debug: false -update_check: true # Enable automatic update check. -komorebi: - start_command: "komorebic start --whkd" - stop_command: "komorebic stop --whkd" - reload_command: "komorebic stop --whkd && komorebic start --whkd" +update_check: true bars: primary-bar: enabled: true @@ -18,14 +12,14 @@ bars: center: false animation: enabled: true - duration: 1000 + duration: 400 blur_effect: enabled: true acrylic: false - dark_mode: true - round_corners: true + dark_mode: false + round_corners: false round_corners_type: "normal" - border_color: "System" + border_color: "system" window_flags: always_on_top: false windows_app_bar: true @@ -33,333 +27,207 @@ bars: width: "100%" height: 32 padding: - top: 6 - left: 6 + top: 0 + left: 0 bottom: 0 - right: 6 + right: 0 widgets: - left: [ - "glazewm_tiling_direction", - "glazewm_workspaces", - "pomodoro", - "active_window" - ] - center: [ - "clock" - ] - right: [ - "cava", - "media", - "weather", - "microphone", - "volume", - "cpu", - "memory", - "notifications", - "wallpapers", - "power_menu" - ] + left: + - "home" + - "quick_launch" + center: + - "clock" + right: + - "systray" + - "cpu" + - "memory" + - "open_meteo" + - "volume" + - "notifications" + - "power_menu" widgets: home: type: "yasb.home.HomeWidget" options: - label: "\udb81\udf17" + label: "\ue700" menu_list: - - { title: "My Crib", path: "~" } - - { title: "Loot Bag", path: "~\\Downloads" } - - { title: "Boring Stuff", path: "~\\Documents" } - - { title: "Cursed Memories", path: "~\\Pictures" } + - { title: "User Home", path: "~" } + - { title: "Download", path: "~\\Downloads" } + - { title: "Documents", path: "~\\Documents" } + - { title: "Pictures", path: "~\\Pictures" } system_menu: true power_menu: true - blur: false - media: - type: "yasb.media.MediaWidget" - options: - label: "\uf001 {title}" - label_alt: "\uf001 {artist}" - callbacks: - on_left: "toggle_media_menu" - on_middle: "do_nothing" - on_right: "do_nothing" - max_field_size: - label: 50 - label_alt: 24 - show_thumbnail: false - controls_only: false - controls_left: true - hide_empty: true - thumbnail_alpha: 250 - thumbnail_padding: 8 - thumbnail_corner_radius: 0 - icons: - prev_track: "" - next_track: "" - play: "" - pause: "" - active_window: - type: "yasb.active_window.ActiveWindowWidget" + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "System" + alignment: "center" + quick_launch: + type: "yasb.quick_launch.QuickLaunchWidget" options: - label: "{win[title]}" - label_alt: "[class_name='{win[class_name]}' exe='{win[process][name]}' hwnd={win[hwnd]}]" - label_no_window: "" - label_icon: true - label_icon_size: 14 - max_length: 46 - max_length_ellipsis: "..." - monitor_exclusive: true + label: "\ue721" + search_placeholder: "Search applications..." + max_results: 30 + show_icons: true + icon_size: 16 + compact_text: true + providers: + apps: + enabled: true + prefix: "*" + priority: 0 + show_recent: true + max_recent: 5 + show_description: true + popup: + width: 720 + height: 480 + blur: true + round_corners: true + round_corners_type: "normal" + border_color: "system" + dark_mode: true + callbacks: + on_left: "toggle_quick_launch" + keybindings: + - keys: "alt+space" + action: "toggle_quick_launch" + screen: "primary" clock: type: "yasb.clock.ClockWidget" options: - label: "{%I:%M:%S}" - label_alt: "{%I:%M:%S}" + label: "{%a, %d %b %H:%M}" + label_alt: "{%A, %d %B %Y %H:%M}" timezones: [] + calendar: + blur: true + round_corners: true + alignment: "center" + direction: "down" + extended: false + show_years: true + show_holidays: false + show_week_numbers: true callbacks: on_left: "toggle_calendar" - weather: - type: "yasb.weather.WeatherWidget" + on_middle: "toggle_label" + on_right: "context_menu" + systray: + type: yasb.systray.SystrayWidget options: - label: "{icon} {temp}" + class_name: systray + label_collapsed: "\ue70d" + label_expanded: "\ue70e" + label_position: right + pin_click_modifier: ctrl + show_unpinned: false + show_battery: false + show_volume: false + icon_size: 16 + use_hook: true + show_in_popup: true + icons_per_row: 5 + popup: + blur: true + round_corners: true + round_corners_type: "normal" + border_color: None + alignment: "center" + direction: "down" + offset_top: 6 + offset_left: 0 + open_meteo: + type: "yasb.open_meteo.OpenMeteoWidget" + options: + label: "\ue706{temp}" label_alt: "{location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}" - api_key: # Get your free API key from https://www.weatherapi.com/ + tooltip: true update_interval: 600 hide_decimal: true - location: # You can use "USA Los Angeles 90006" {COUNTRY CITY ZIP_CODE}, or just city. + units: "metric" callbacks: on_left: "toggle_card" + on_middle: "do_nothing" + on_right: "toggle_label" icons: - sunnyDay: "\ue30d" - clearNight: "\ue32b" - cloudyDay: "\ue312" - cloudyNight: "\ue311" - rainyDay: "\ue308" - rainyNight: "\ue333" - snowyIcyDay: "\ue30a" - snowyIcyNight: "\ue335" - blizzardDay: "\udb83\udf36" - blizzardNight: "\udb83\udf36" - foggyDay: "\ue303" - foggyNight: "\ue346" - thunderstormDay: "\ue30f" - thunderstormNight: "\ue338" - default: "\uebaa" + sunnyDay: "\ue706" + clearNight: "\uec46" weather_card: - blur: True - round_corners: True - round_corners_type: "normal" - border_color: "System" + blur: true alignment: "right" direction: "down" - icon_size: 64 - show_hourly_forecast: True # Set to False to disable hourly forecast - time_format: "12h" # can be 12h or 24h + icon_size: 32 + show_hourly_forecast: true + time_format: "24h" hourly_point_spacing: 76 - hourly_icon_size: 32 # better to set 16, 32 or 64 for better quality - icon_smoothing: true # should be true for smoother icon or false for sharper icon if using 16, 32 or 64 for hourly_icon_size - temp_line_width: 2 # can be 0 to hide the temperature line + hourly_icon_size: 16 + icon_smoothing: true + temp_line_width: 2 current_line_color: "#8EAEE8" - current_line_width: 1 # can be 0 to hide the current hour line + current_line_width: 1 current_line_style: "dot" - label_shadow: - enabled: true - color: "black" - radius: 3 - offset: [ 1, 1 ] + hourly_forecast_buttons: + enabled: false + weather_animation: + enabled: true + snow_overrides_rain: true + temp_line_animation_style: both + rain_effect_intensity: 1.0 + snow_effect_intensity: 1.0 + scale_with_chance: true volume: type: "yasb.volume.VolumeWidget" options: - label: "{icon} {level}" - label_alt: "{volume}" - tooltip: false + label: "{icon}" + label_alt: "{icon}{level}" + tooltip: true volume_icons: - - "\ueee8" - - "\uf026" - - "\uf027" - - "\uf027" - - "\uf028" + - "\ue74f" + - "\ue992" + - "\ue993" + - "\ue994" + - "\ue995" callbacks: - on_left: "toggle_mute" - on_right: "exec cmd.exe /c start ms-settings:sound" - microphone: - type: "yasb.microphone.MicrophoneWidget" - options: - label: "{icon} {level}" - label_alt: "{icon} {level}%" - icons: - normal: "\udb80\udf6c" - muted: "\udb80\udf6d" - callbacks: - on_left: "toggle_mute" - on_middle: "toggle_label" - on_right: "exec cmd.exe /c start ms-settings:sound" - power_menu: - type: "yasb.power_menu.PowerMenuWidget" - options: - label: "\uf011" - uptime: True - blur: False - blur_background: True - animation_duration: 200 - button_row: 5 - buttons: - shutdown: ["\uf011", "Rage Quit"] - restart: ["\uead2", "Oops, Reboot"] - signout: ["\udb80\udf43", "Dip Out"] - hibernate: ["\uf28e", "Bear Mode"] - sleep: ["\u23fe", "Nap Time"] - cancel: ["", "Nah, Im Good "] - apps: - type: "yasb.applications.ApplicationsWidget" - options: - container_padding: - top: 0 - left: 8 - bottom: 0 - right: 8 - label: "{data}" - app_list: - - { icon: "\ueb03", launch: "cmd /c Taskmgr" } - - { icon: "\uf489", launch: "wt"} - notifications: - type: "yasb.notifications.NotificationsWidget" - options: - label: "\uf476 {count}" - label_alt: "{count} notifications" - hide_empty: true - tooltip: false - callbacks: - on_left: "toggle_notification" - on_right: "do_nothing" - on_middle: "toggle_label" - wallpapers: - type: "yasb.wallpapers.WallpapersWidget" - options: - label: "\udb83\ude09" - image_path: # Example path to folder with images - change_automatically: false # Automatically change wallpaper - update_interval: 60 # If change_automatically is true, update interval in seconds - gallery: - enabled: true - blur: true - image_width: 220 - image_per_page: 8 - show_buttons: true - orientation: "portrait" - image_spacing: 8 - lazy_load: true - lazy_load_delay: 80 - lazy_load_fadein: 400 - image_corner_radius: 20 - enable_cache: true - cava: - type: "yasb.cava.CavaWidget" - options: - bar_height: 12 - min_bar_height: 0 - gradient: 1 - reverse: 0 - foreground: "#89b4fa" - gradient_color_1: '#74c7ec' - gradient_color_2: '#89b4fa' - gradient_color_3: '#cba6f7' - bars_number: 8 - bar_spacing: 2 - bar_width: 4 - hide_empty: true - container_padding: - top: 0 - left: 8 - bottom: 0 - right: 8 + on_left: "toggle_volume_menu" + on_right: "toggle_mute" cpu: type: "yasb.cpu.CpuWidget" options: - label: "\uf4bc {info[percent][total]}" - label_alt: "\uf437 {info[histograms][cpu_percent]}" + label: "\ueea1 {info[percent][total]}%" + label_alt: "\ueea1 {info[freq][current]} MHz" update_interval: 2000 - cpu_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_right: "exec cmd /c Taskmgr" - label_shadow: - enabled: true - color: "black" - radius: 3 - offset: [ 1, 1 ] - glazewm_workspaces: - type: "glazewm.workspaces.GlazewmWorkspacesWidget" - options: - # Offline behavior (matching komorebi's label_offline and hide_if_offline) - offline_label: "GlazeWM Offline" - hide_if_offline: true - - # Workspace display labels (matching komorebi's label_workspace_btn and label_workspace_active_btn) - populated_label: "\udb85\udcfc" - empty_label: "\udb85\udcfc" - active_populated_label: "\udb85\udcfb" - active_empty_label: "\udb85\udcfb" - - # Workspace management (matching komorebi's hide_empty_workspaces) - hide_empty_workspaces: false - - # Server connection - glazewm_server_uri: "ws://localhost:6123" - - # Additional GlazeWM-specific options (keeping defaults) - enable_scroll_switching: true - reverse_scroll_direction: true - container_padding: - top: 0 - left: 0 - bottom: 0 - right: 0 - glazewm_tiling_direction: - type: "glazewm.tiling_direction.GlazewmTilingDirectionWidget" - options: - horizontal_label: "\udb81\udce1" - vertical_label: "\udb81\udce2" - btn_shadow: - enabled: true - color: "black" - radius: 3 - offset: [ 1, 1 ] - pomodoro: - type: "yasb.pomodoro.PomodoroWidget" - options: - label: "{icon} {remaining}" - label_alt: "{icon} {session}/{total_sessions} - {status}" - work_duration: 25 - break_duration: 5 - long_break_duration: 15 - long_break_interval: 4 - auto_start_breaks: true - auto_start_work: true - sound_notification: true - show_notification: true - hide_on_break: false - session_target: 8 - icons: - work: "\uf252" - break: "\uf253" - paused: "\uf254" - container_padding: - top: 0 - left: 12 - bottom: 0 - right: 12 menu: + enabled: true + show_graph: true + show_graph_grid: true + graph_history_size: 60 + callbacks: + on_left: toggle_menu + on_middle: do_nothing + on_right: toggle_label + memory: + type: "yasb.memory.MemoryWidget" + options: + label: "\ueea1 {virtual_mem_free}" + label_alt: "\ueea1 VIRT: {virtual_mem_percent}% SWAP: {swap_mem_percent}%" + update_interval: 5000 + callbacks: + on_left: "toggle_menu" + on_middle: "do_nothing" + on_right: "toggle_label" + menu: + enabled: true + show_graph: true + show_graph_grid: true + graph_history_size: 60 + power_menu: + type: "yasb.power_menu.PowerMenuWidget" + options: + label: "\ue712" + uptime: true + show_user: true + menu_style: "popup" + popup: blur: true round_corners: true round_corners_type: "normal" @@ -368,46 +236,23 @@ widgets: direction: "down" offset_top: 6 offset_left: 0 - circle_background_color: "#09ffffff" - circle_work_progress_color: "#88c0d0" - circle_break_progress_color: "#a3be8c" - circle_thickness: 8 - circle_size: 160 - callbacks: - on_left: "toggle_menu" - on_middle: "reset_timer" - on_right: "toggle_label" - label_shadow: - enabled: true - color: "black" - radius: 3 - offset: [ 1, 1 ] - memory: - type: "yasb.memory.MemoryWidget" + profile_image_size: 64 + buttons: + lock: ["\ue72e", "Lock"] + signout: ["\uf3b1", "Sign out"] + sleep: ["\uec46", "Sleep"] + hibernate: ["\ue66d", "Hibernate"] + restart: ["\ue72c", "Restart"] + shutdown: ["\ue7e8", "Shut Down"] + cancel: ["", "Cancel"] + notifications: + type: "yasb.notifications.NotificationsWidget" options: - label: "\uf4bc {virtual_mem_percent}" - label_alt: "\uf4bc VIRT: {virtual_mem_percent}% SWAP: {swap_mem_percent}%" - update_interval: 5000 + label: "\uf2a3" + label_alt: "{count} notifications" + hide_empty: true + tooltip: false callbacks: - on_left: "toggle_label" - on_middle: "do_nothing" + on_left: "toggle_notification" on_right: "do_nothing" - 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 ] \ No newline at end of file + on_middle: "do_nothing" diff --git a/yasb/styles.css b/yasb/styles.css index 83534bd..b161401 100644 --- a/yasb/styles.css +++ b/yasb/styles.css @@ -1,446 +1,1094 @@ +:root { + --bar-dark-bg: rgba(36, 36, 36, 0.6); + --bar-light-bg: rgba(255, 255, 255, 0.75); + --bar-dark-border: #303030; + --bar-light-border: #e7e7e7; + --dark-menu-bg: rgba(36, 36, 36, 0.6); + --light-menu-bg: rgba(255, 255, 255, 0.75); + --dark-color: rgb(65, 65, 65); + --dark-dim-color: rgb(117, 117, 117); + --light-color: rgba(255, 255, 255, 0.9); + --light-dim-color: rgba(255, 255, 255, 0.6); + --dark-icon-color: rgb(36, 36, 36); + --light-icon-color: rgba(255, 255, 255, 0.9); +} * { - font-size: 12px; - color: #cdd6f4; - font-weight: 500; - font-family: "JetBrainsMono NFP"; - margin: 0; - padding: 0; + font-size: 12px; + font-weight: 400; + font-family: "Segoe UI", "Segoe Fluent Icons" +} +.dark.yasb-bar { + background-color: var(--bar-dark-bg); + border-bottom: 1px solid var(--bar-dark-border); + padding: 0 12px; } .yasb-bar { - padding: 0 8px; - margin: 0; - background-color: #1e1e2e; - border-radius: 16px; + background-color: var(--bar-light-bg); + border-bottom: 1px solid var(--bar-light-border); + padding: 0 12px; } -.widget { - padding: 0 10px; - margin: 0; -} -.widget .label { - padding: 2px 2px 1px 2px; - -} -.widget .label.alt { - padding: 1px 8px 1px 8px; -} - .clock-widget .label { - padding-left:8px; -} -.glazewm-workspaces { - margin: 0; -} - -.glazewm-workspaces .ws-btn { - font-size: 18px; - background-color: transparent; - border: none; - padding: 0 2px 0 2px; - margin: 0; - color: #95a0ad; -} - -.glazewm-workspaces .ws-btn.active_populated { - color: #89b4fa; -} - -.glazewm-workspaces .ws-btn.active_empty { - color: #89b4fa; -} - -.glazewm-workspaces .ws-btn.populated { - color: #74c7ec; -} - -.glazewm-workspaces .ws-btn.empty { - color: #95a0ad; -} - -.glazewm-workspaces .ws-btn:hover, -.glazewm-workspaces .ws-btn.populated:hover, -.glazewm-workspaces .ws-btn.empty:hover { - color: #89b4fa; -} - -.glazewm-tiling-direction { - background-color: transparent; - padding: 0; - margin: 0; -} - -.glazewm-tiling-direction .btn { - font-size: 18px; - width: 14px; - padding: 0 4px 0 4px; - color: #CDD6F4; - border: none; -} - -.glazewm-tiling-direction .btn:hover { - background-color: #727272; -} -/*POWER MENU WIDGET*/ -/* Uptime text */ -.uptime { - font-size: 14px; - margin-bottom: 10px; - color: rgba(191, 202, 219, 0.726); - font-weight: 600; - font-family: "JetBrainsMono NFP"; -} -.power-menu-widget .label { - color: #eba0ac; - font-size: 16px; -} -.power-menu-popup .button { - padding: 0; - width: 160px; - height: 240px; - border-radius: 4px; - background-color: rgba(41, 42, 58, 0.75); - font-family: "JetBrainsMono NFP"; - color: white; - border: 4px solid rgba(255, 255, 255, 0); - -} -.power-menu-popup .button.hover { - background-color: rgb(55, 56, 75); - border: 4px solid rgb(55, 56, 75); -} -.power-menu-popup .button .label { - margin-bottom: 8px; - font-size: 16px; - font-weight: 600; - color: rgba(255, 255, 255, 0.6); - font-family: "JetBrainsMono NFP"; -} -.power-menu-popup .button .icon { - font-size: 64px; - padding-top: 54px; - color: rgba(255, 255, 255, 0.25); -} -.power-menu-popup .button.cancel { - height: 20px !important; /* Much thinner than the 240px of other buttons */ - width: 100%; /* Full width to span across */ - padding-top: 10px; - padding-bottom: 10px; -} - -.power-menu-popup .button.cancel .icon { - font-size: 24px !important; /* Smaller icon for the thinner button */ - padding-top: 0px !important; /* Remove the large top padding */ - color: rgba(243, 139, 168, 0.55); -} - -.power-menu-popup .button.cancel .label { - margin-bottom: 0px !important; /* Remove bottom margin */ - color: rgba(243, 139, 168, 0.95); -} -/* ICONS */ -.icon { - font-size: 16px; -} -.volume-widget .icon { - color: #89b4fa; - margin: 1px 2px 0 0; -} -.start-menu .icon { - font-size: 18px; - color: #89b4fa -} -.clock-widget .icon { - color: #cba6f7; - font-size: 14px; -} -/* WEATHER WIDGET */ -.weather-card { - background-color: rgba(17, 17, 27, 0.5); -} -.weather-card-today { - border: 1px solid #282936; - border-radius: 8px; - background-color: rgba(17, 17, 27, 0.2); -} -.weather-card-today .label { +.tooltip { + background-color: rgba(36, 36, 36, 0.95); + border-radius: 4px; + color: rgba(255, 255, 255, 0.9); + padding: 5px 10px; font-size: 12px; -} -.weather-card-today .label.location { - font-size: 24px; - font-weight: 700; -} -.weather-card-today .label.alert { - font-size: 12px; - font-weight: 700; - background-color: rgba(247, 199, 42, 0.05); - border: 1px solid rgba(247, 209, 42, 0.1); - color: rgba(196, 181, 162, 0.85); - border-radius: 6px; - padding: 5px 0; -} -.weather-card-day { - border: 1px solid #45475a; - border-radius: 8px; - background-color: rgba(17, 17, 27, 0.2); -} - -.weather-card-day.active { - background-color: rgba(40, 40, 60, 0.6); - border: 1px solid rgba(50, 50, 75, 1); -} - -.weather-card-day:hover { - background-color: rgba(40, 40, 60, 0.6); -} - -.weather-card-day .label { - font-size: 12px; -} - -.weather-card .hourly-container { - border: 1px solid #282936; - background-color: #3c5fa0; - border-radius: 8px; - min-height: 150px; -} - -.weather-card .hourly-data { - /* font-family: 'Segoe UI';*/ - /* color: cyan;*/ /* <- Font color */ - background-color: #FAE93F; /* <- Curve color */ - font-size: 12px; - font-weight: bold; -} -.media-widget { - padding: 0; - margin: 0; -} -.media-widget .label { - color: #b4befe; - padding: 0px; - padding-right: 4px; -} -.media-menu { - min-width: 420px; - max-width: 420px; - background-color: rgba(31, 39, 49, 0.5); -} -.media-menu .title, -.media-menu .artist, -.media-menu .source { - font-size: 14px; + font-family: 'Segoe UI'; font-weight: 600; - margin-left: 10px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin-top: 4px; } -.media-menu .artist { - font-size: 13px; - color: #6c7086; - margin-top: 0px; - margin-bottom: 8px; +.context-menu, +.context-menu .menu-checkbox { + background-color: rgba(26, 26, 26, 0.6); + padding: 4px 0px; + font-family: 'Segoe UI'; + font-size: 12px; + color: rgba(255, 255, 255, 0.9); } -.media-menu .source { - font-size: 11px; - color: #000; - font-weight: normal; - border-radius: 3px; - background-color: #bac2de; - padding: 2px 4px; - +.context-menu { + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.075); } -/* The source class name is the same as what you see in the media widget; just replace spaces with dashes and convert it to lowercase. -Example: "Windows Media" becomes "windows-media" */ -.media-menu .source.firefox { - background-color: #ff583b; - color: #ffffff; +.context-menu::right-arrow { + width: 8px; + height: 8px; + padding-right: 24px; } -.media-menu .source.spotify { - background-color: #199143; - color: #ffffff; -} -.media-menu .source.edge { - background-color: #0078d4; - color: #ffffff; -} -.media-menu .source.windows-media { - background-color: #0078d4; - color: #ffffff; -} - -.media-menu .btn { - font-family: "Segoe Fluent Icons"; - font-size: 14px; - font-weight: 400; - margin: 10px 2px 0px 2px; - min-width: 40px; - max-width: 40px; - min-height: 40px; - max-height: 40px; - border-radius: 20px; -} -.media-menu .btn.prev { - margin-left: 10px; -} -.media-menu .btn:hover { - color: white; - background-color: rgba(255, 255, 255, 0.1); -} -.media-menu .btn.play { - background-color: rgba(255, 255, 255, 0.1); - font-size: 20px -} -.media-menu .btn.disabled:hover, -.media-menu .btn.disabled { - color: #4e525c; - background-color: rgba(0, 0, 0, 0); -} - -.media-menu .playback-time { - font-size: 13px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #7f849c; - margin-top: 20px; +.context-menu::item, +.context-menu .menu-checkbox { + background-color: transparent; + padding: 6px 12px; + margin: 2px 6px; + border-radius: 6px; min-width: 100px; } -.media-menu .progress-slider { - height: 10px; - margin: 5px 4px; - border-radius: 3px; +.context-menu::item:selected, +.context-menu .menu-checkbox:hover { + background-color: rgba(255, 255, 255, 0.1); + color: #FFFFFF; } -.media-menu .progress-slider::groove { - background: transparent; - height: 2px; - border-radius: 3px; - background: rgba(255, 255, 255, 0.1); - +.context-menu::separator { + height: 1px; + background-color: #404040; + margin: 4px 8px; } -.media-menu .progress-slider::groove:hover { - background: transparent; - height: 6px; - border-radius: 3px; - background: rgba(255, 255, 255, 0.2); +.context-menu::item:disabled { + color: #666666; + background-color: transparent; } -.media-menu .progress-slider::sub-page { - background: white; - border-radius: 3px; - height: 4px; -} - /* Hide media widget buttons */ -.media-widget .btn { - padding: 0; - margin: 0 -6px; - padding-left: 4px; -} -.pomodoro-widget { - padding: 0 0 0 0; -} -.pomodoro-widget .icon { +.context-menu .menu-checkbox .checkbox { + border: none; + padding: 8px 16px; font-size: 12px; - padding-right: 4px; + margin: 0; + color: rgba(255, 255, 255, 0.9); + font-family: 'Segoe UI' } -.pomodoro-widget .label.paused, -.pomodoro-widget .icon.paused { - color: #7d7e8b; +.context-menu .submenu::item:disabled { + margin: 0; + padding-left: 16px; } -.pomodoro-widget .label.work, -.pomodoro-widget .icon.work { - color: #a6e3a1; +.context-menu .menu-checkbox .checkbox:unchecked { + color: rgba(255, 255, 255, 0.9); } -.pomodoro-widget .label.break, -.pomodoro-widget .icon.break { - color: #89b4fa; +.context-menu .menu-checkbox .checkbox::indicator { + width: 12px; + height: 12px; + margin-left: 0px; + margin-right: 8px; } -/* Pomodoro menu styling */ -.pomodoro-menu { - background-color: rgba(17, 17, 27, 0.2); +.context-menu .menu-checkbox .checkbox::indicator:unchecked { + background: #444444; + border-radius: 2px; +} +.context-menu .menu-checkbox .checkbox::indicator:checked { + background: #4a90e2; + border-radius: 2px; +} +.context-menu .menu-checkbox .checkbox:focus { + outline: none; +} +.widget { + padding: 2px 8px 0 8px; + margin: 4px 0; + border-radius: 4px; +} + +.widget .icon { + font-size: 16px; + font-weight: 400; + color: var(--dark-icon-color); +} +.yasb-bar.dark .widget .icon { + font-size: 16px; + font-weight: 400; + color: var(--light-icon-color); +} +.widget .label { + padding: 0px 0px 4px 4px; + color: var(--dark-color) +} + +.yasb-bar.dark .widget .label { + color: var(--light-color); +} +.widget:hover { + background-color: rgba(0, 0, 0, 0.08); +} +.dark .widget:hover { + background-color: rgba(255, 255, 255, 0.08); +} + +/* Quick Launch Popup - main window */ +.quick-launch-popup .container { + background-color: var(--light-menu-bg); +} +.dark .quick-launch-popup .container { + background-color: var(--dark-menu-bg); +} +/* Search bar container */ +.quick-launch-popup .search { + padding: 12px 16px; + background-color: transparent; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.dark .quick-launch-popup .search { + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} +/* Search loader line color */ +.quick-launch-popup .search .loader-line { + color: #449bff; +} +.quick-launch-popup .search .search-icon { + font-family: "Segoe Fluent Icons"; + font-size: 18px; + color: var(--dark-color); + padding-right: 8px; + min-width: 18px; +} +.dark .quick-launch-popup .search .search-icon { + color: var(--light-color); +} +.quick-launch-popup .search .search-submit-icon { + font-family: "Segoe Fluent Icons"; + font-size: 18px; + color: var(--dark-color); + min-width: 18px; +} +.dark .quick-launch-popup .search .search-submit-icon { + color: var(--light-color); +} +.quick-launch-popup .search .search-input { + background: transparent; + border: none; + color: var(--dark-color); + font-size: 16px; + font-family: "Segoe UI"; + font-weight: 400; + padding: 4px 0; +} +.dark .quick-launch-popup .search .search-input { + color: var(--light-color); +} +/* Search prefix styling (e.g., ">" for commands) */ +.quick-launch-popup .search .prefix { + background: #2167d8; + border-radius: 6px; + color: #ffffff; + padding: -2px 8px 0px 8px; + margin-top: 2px; + margin-right: 4px; + font-size: 13px; + font-weight: 600; + font-family: "Segoe UI"; + max-height: 28px; +} + +/* Results list */ +.quick-launch-popup .results { + background: transparent; + padding: 8px; +} +/* Individual result item here you can set font szie for title */ +.quick-launch-popup .results-list-view { + font-size: 14px; + font-family: "Segoe UI"; + font-weight: 600; + color: var(--dark-color) +} +.dark .quick-launch-popup .results-list-view { + color: var(--light-color); +} +.quick-launch-popup .results-list-view .description { + color: var(--dark-dim-color); + font-size: 11px; + font-family: "Segoe UI"; + font-weight: 600; +} +.dark .quick-launch-popup .results-list-view .description { + color: var(--light-dim-color); +} +.quick-launch-popup .results-list-view .separator { + color: var(--dark-dim-color); + font-size: 13px; + font-family: 'Segoe UI'; + font-weight: 600; + padding: 4px 0 4px 12px; +} +/* Result item hover and selected states */ +.quick-launch-popup .results-list-view::item { + padding: 4px 12px; border-radius: 8px; } -.pomodoro-menu .header { - font-size: 16px; - font-weight: 600; - max-height: 0px; - color: #ffffff; +.quick-launch-popup .results-list-view::item:hover, +.quick-launch-popup .results-list-view::item:selected { + background-color: rgba(128, 130, 158, 0.1); } -.pomodoro-menu .status { - font-size: 18px; - font-weight: 600; - color: #cdd6f4; -} -.pomodoro-menu .session { - font-size: 12px; - color: #a6adc8; -} -.pomodoro-menu .button { - background-color: #3f4053; - color: #cdd6f4; - border: none; - border-radius: 4px; - padding: 6px 12px; -} -.pomodoro-menu .button.start { - background-color: #3f4053; -} -.pomodoro-menu .button.reset { - background-color: #3f4053; -} -.pomodoro-menu .button:hover { - background-color: rgba(255, 255, 255, 0.158); -} -.pomodoro-menu .button.pause { - background-color: #a6e3a1; - color: #1e1e2e; -} -.pomodoro-menu .button:pressed { - background-color: #5a5b6e; +/* Empty state when no results found */ +.quick-launch-popup .results-empty-text { + font-size: 24px; + font-family: "Segoe UI"; + color: rgb(255, 255, 255); + padding-top: 8px; } -.calendar { - background-color: rgba(17, 17, 27, 0.4); +/* Preview Pane */ +.quick-launch-popup .preview { + background: rgba(0, 0, 0, 0); + border-left: 1px solid rgba(255, 255, 255, 0.06); } -.calendar .calendar-table, -.calendar .calendar-table::item { +.quick-launch-popup .preview .preview-text { + font-size: 13px; + color: rgba(255, 255, 255, 0.85); + padding: 8px 12px; + font-family: "Segoe UI"; + background-color: rgba(255, 255, 255, 0.03); + border: none; +} +.quick-launch-popup .preview .preview-image { + background-color: rgba(255, 255, 255, 0.03); + padding: 8px 12px; +} +.quick-launch-popup .preview .preview-meta { + padding: 6px 12px; + border-top: 1px solid rgba(255, 255, 255, 0.06); + font-family: "Segoe UI"; +} +.quick-launch-popup .preview .preview-meta .preview-title { + font-size: 14px; + font-weight: 600; + color: rgb(255, 255, 255); + font-family: "Segoe UI"; + margin-bottom: 10px; + margin-left: -2px; +} + +.quick-launch-popup .preview .preview-meta .preview-subtitle { + font-size: 12px; + color: rgba(255, 255, 255, 0.8); + font-family: "Segoe UI"; + padding-bottom: 1px; +} + +/* Preview inline edit form (.preview.edit) */ +.quick-launch-popup .preview.edit .preview-title { + font-size: 13px; + font-family: "Segoe UI"; + font-weight: 600; + color: #ffffff; + padding: 8px 12px 4px 12px; +} +.quick-launch-popup .preview.edit .preview-line-edit { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + color: #ffffff; + font-size: 13px; + font-family: "Segoe UI"; + padding: 6px 8px; + margin: 0 12px; +} +.quick-launch-popup .preview.edit .preview-line-edit:focus { + border-color: rgba(255, 255, 255, 0.3); +} +.quick-launch-popup .preview.edit .preview-text-edit { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + color: #ffffff; + font-size: 13px; + font-family: "Segoe UI"; + padding: 6px 8px; + margin: 0 12px; +} +.quick-launch-popup .preview.edit .preview-text-edit:focus { + border-color: rgba(255, 255, 255, 0.3); +} +.quick-launch-popup .preview.edit .preview-actions { + padding: 8px 12px; +} +.quick-launch-popup .preview.edit .preview-btn { + background: rgb(45, 46, 48); + border: none; + border-radius: 4px; + color: rgba(255, 255, 255, 0.8); + font-size: 12px; + font-family: "Segoe UI"; + font-weight: 600; + padding: 4px 16px; +} +.quick-launch-popup .preview.edit .preview-btn:hover { + background: rgb(59, 60, 63); +} +.quick-launch-popup .preview.edit .preview-btn.save { + background: rgb(12, 81, 190); + color: #ffffff; +} +.quick-launch-popup .preview.edit .preview-btn.save:hover { + background: rgb(19, 90, 204); +} + +.cpu-popup, +.memory-popup { + background-color: var(--light-menu-bg); + min-width: 400px; + max-width: 400px; +} +.dark .cpu-popup, +.dark .memory-popup { + background-color: var(--dark-menu-bg); + min-width: 400px; + max-width: 400px; +} + +.cpu-popup .header, +.memory-popup .header { + background: transparent; + padding: 12px 16px; +} +.cpu-popup .header .text, +.memory-popup .header .text { + font-size: 16px; + font-family: "Segoe UI"; + +} +.cpu-popup .header .pin-btn, +.memory-popup .header .pin-btn { + font-size: 14px; + background: transparent; + font-family: "Segoe Fluent Icons"; + border: none; + padding: 6px; + color: var(--dark-dim-color) +} +.dark .cpu-popup .header .pin-btn, +.dark .memory-popup .header .pin-btn { + color: var(--light-dim-color); +} +.cpu-popup .header .pin-btn:hover, +.memory-popup .header .pin-btn:hover { + color: var(--dark-dim-color) +} +.dark .cpu-popup .header .pin-btn:hover, +.dark .memory-popup .header .pin-btn:hover { + color: var(--light-dim-color); +} +.cpu-popup .header .pin-btn.pinned, +.memory-popup .header .pin-btn.pinned { + color: var(--dark-color) +} +.dark .cpu-popup .header .pin-btn.pinned, +.dark .memory-popup .header .pin-btn.pinned { + color: var(--light-color); +} +/* Graph area */ +.cpu-popup .graph-container, +.memory-popup .graph-container { + background: transparent; + min-height: 64px; +} +.cpu-popup .cpu-graph, +.memory-popup .memory-graph { + color: #0f6bff; + /* <-- set the graph line/fill color */ +} +.cpu-popup .cpu-graph-grid, +.memory-popup .memory-graph-grid { + color: rgba(0, 0, 0, 0.05); + /* set the grid line color */ +} +.dark .cpu-popup .cpu-graph-grid, +.dark .memory-popup .memory-graph-grid { + color: rgba(255, 255, 255, 0.05); + /* set the grid line color */ +} +.cpu-popup .graph-title, +.memory-popup .graph-title { + font-size: 12px; + color: var(--dark-dim-color); + font-family: 'Segoe UI'; + padding: 0px 0px 4px 14px; +} +.dark .cpu-popup .graph-title, +.dark .memory-popup .graph-title { + color: var(--light-dim-color); +} +/* Stats grid */ +.cpu-popup .stats, +.memory-popup .stats { + background: transparent; + padding: 16px; +} +.cpu-popup .stats .stat-item, +.memory-popup .stats .stat-item { + background-color: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.04); + border-radius: 8px; + padding: 8px 12px; + margin: 8px; +} +.cpu-popup .stats .stat-item, +.memory-popup .stats .stat-item { + background-color: rgba(255, 255, 255, 0.35); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: 8px; + padding: 8px 12px; + margin: 8px; +} +.dark .cpu-popup .stats .stat-item, +.dark .memory-popup .stats .stat-item { + background-color: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.04); + border-radius: 8px; + padding: 8px 12px; + margin: 8px; +} +.cpu-popup .stats .stat-label, +.memory-popup .stats .stat-label { + font-size: 13px; + color: var(--dark-dim-color); + font-family: 'Segoe UI'; + font-weight: 400; + padding: 6px 4px 2px 4px; +} +.dark .cpu-popup .stats .stat-label, +.dark .memory-popup .stats .stat-label { + color: var(--light-dim-color); +} +.cpu-popup .stats .stat-value, +.memory-popup .stats .stat-value { + font-size: 20px; + font-weight: 700; + color: var(--dark-color); + font-family: 'Segoe UI'; + padding: 0 4px 12px 4px; +} +.dark .cpu-popup .stats .stat-value, +.dark .memory-popup .stats .stat-value { + color: var(--light-color); +} + +.power-menu-widget .label { + font-size: 16px; + padding: 0; +} +.power-menu-compact { + min-width: 260px; + background-color: var(--light-menu-bg) +} +.dark .power-menu-compact { + min-width: 260px; + background-color: var(--dark-menu-bg); +} +.power-menu-compact .profile-info { + padding: 12px 0 24px 0; +} + +.power-menu-compact .profile-info .profile-username { + font-size: 16px; + font-weight: 600; + color: var(--dark-dim-color); + font-family: 'Segoe UI'; + margin-top: 4px; +} +.dark .power-menu-compact .profile-info .profile-username { + color: var(--light-dim-color); +} +.power-menu-compact .profile-info .profile-account-type { + font-size: 12px; + color: #ffffff; + font-weight: 600; + margin-top: 8px; + font-family: 'Segoe UI'; + background-color: #0f68dd; + padding: 2px 6px; + border-radius: 6px; +} +.power-menu-compact .profile-info .profile-email { + font-size: 13px; + color: var(--dark-dim-color); + margin-top: 2px; + font-family: 'Segoe UI'; +} +.dark .power-menu-compact .profile-info .profile-email { + color: var(--light-dim-color); +} +.power-menu-compact .manage-accounts { + font-size: 12px; + background-color: rgba(255, 255, 255, 0.08); + font-family: 'Segoe UI'; + font-weight: 600; + padding: 2px 8px; + margin-top: 16px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.1); +} +.power-menu-compact .manage-accounts:hover { + background-color: rgba(255, 255, 255, 0.15); +} +.power-menu-compact .buttons { + background-color: rgba(255, 255, 255, 0.35); + margin: 0 12px 12px 12px; + border-radius: 8px; +} +.dark .power-menu-compact .buttons { + background-color: rgba(255, 255, 255, 0.03); + margin: 0 12px 12px 12px; + border-radius: 8px; +} +.power-menu-compact .button { + padding: 8px 16px; + background-color: transparent; + border: none; + border-radius: 0; +} +.power-menu-compact .button.hover { + background-color: rgba(255, 255, 255, 0.4); +} +.dark .power-menu-compact .button.hover { + background-color: rgba(255, 255, 255, 0.05); +} +.power-menu-compact .button.lock.hover { + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} +.power-menu-compact .button.shutdown.hover { + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} +.power-menu-compact .button .icon { + font-size: 14px; + font-weight: 400; + color: var(--dark-color); + padding-right: 10px; + min-width: 20px; +} +.dark .power-menu-compact .button .icon { + color: var(--light-color); +} +.power-menu-compact .button .label { + font-size: 13px; + font-weight: 500; + font-family: "Segoe UI"; + color: var(--dark-dim-color) +} +.dark .power-menu-compact .button .label { + color: var(--light-dim-color); +} + +.power-menu-compact .icon.hover, +.power-menu-compact .label.hover { + color: var(--dark-color) +} +.dark .power-menu-compact .icon.hover, +.dark .power-menu-compact .label.hover { + color: var(--light-color); +} +.dark .open-meteo-widget .icon { + color: #F6E3B4 +} +.open-meteo-card { + background-color: var(--light-menu-bg); + min-width: 500px; +} +.dark .open-meteo-card { + background-color: var(--dark-menu-bg); + min-width: 500px; +} +.open-meteo-card-today .label { + font-size: 13px; + font-family: "Segoe UI"; + font-weight: 400; + color: var(--dark-dim-color) +} +.dark .open-meteo-card-today .label { + color: var(--light-dim-color); +} +.open-meteo-card-today .label.location { + font-size: 32px; + font-weight: 700; + font-family: "Segoe UI"; + color: var(--dark-color) +} +.dark .open-meteo-card-today .label.location { + color: var(--light-color); +} +.open-meteo-card-today .label.sunrisesunset { + font-size: 18px; + font-family: "Segoe UI"; + font-weight: 600; + color: rgb(201, 204, 159); +} +.open-meteo-card-today .label.sunrisesunset-icon { + font-size: 16px; + color: rgb(201, 204, 159); + font-family: "Segoe Fluent Icons"; + font-weight: 600; +} +.open-meteo-card-day { + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + background-color: rgba(0, 0, 0, 0); + padding: 4px; + min-width: 70px; +} +.open-meteo-card-day .day-name { + font-family: "Segoe UI"; + color: var(--dark-dim-color); + font-size: 12px; + font-weight: 600; +} +.dark .open-meteo-card-day .day-name { + color: var(--light-dim-color); +} +.open-meteo-card-day .day-temp-max { + font-family: "Segoe UI"; + font-weight: 700; + font-size: 16px; + color: var(--dark-color); +} +.dark .open-meteo-card-day .day-temp-max { + color: var(--light-color); +} + +.open-meteo-card-day .day-temp-min { + font-family: "Segoe UI"; + color: var(--dark-color); + font-weight: 400; + font-size: 13px; +} +.dark .open-meteo-card-day .day-temp-min { + color: var(--light-color); +} + +.open-meteo-card-day.active { + background-color: rgba(255, 255, 255, 0.35); + border: 1px solid rgba(255, 255, 255, 0.3); +} +.dark .open-meteo-card-day.active { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); +} +.open-meteo-card-day:hover { + background-color: rgba(255, 255, 255, 0.35); + border: 1px solid rgba(255, 255, 255, 0.3); +} +.dark .open-meteo-card-day:hover { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); +} +.open-meteo-card .hourly-container { + border: none; + background-color: transparent; + min-height: 120px; +} +.open-meteo-card .hourly-data { + font-size: 11px; + font-weight: 700; + font-family: "Segoe UI"; +} +.open-meteo-card .hourly-data.temperature { + background-color: #c9be48; +} +.open-meteo-card .hourly-data.rain { + background-color: #4a90e2; +} +.open-meteo-card .hourly-data.snow { + background-color: #a0c4ff; +} +.open-meteo-card .hourly-data .hourly-rain-animation { + color: rgba(150, 200, 255, 40); + background-color: rgba(0, 0, 0, 0); +} +.open-meteo-card .hourly-data .hourly-snow-animation { + color: rgba(255, 255, 255, 150); + background-color: rgba(0, 0, 0, 0); +} +.open-meteo-card .hourly-data-buttons { + margin-top: 11px; + margin-left: 11px; +} +.open-meteo-card .hourly-data-button { + border-radius: 4px; + min-height: 24px; + min-width: 24px; + max-width: 24px; + max-height: 24px; + font-size: 14px; + color: rgba(255, 255, 255, 0.3); + border: 1px solid transparent; +} +.open-meteo-card .hourly-data-button.active { + color: #fff; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); +} +.open-meteo-card .search-head { + font-size: 18px; + font-family: "Segoe UI"; + font-weight: 600; + color: rgba(255, 255, 255, 0.9); +} +.open-meteo-card .search-description { + font-size: 14px; + font-family: "Segoe UI"; + font-weight: 400; + color: rgba(255, 255, 255, 0.7); + padding-bottom: 8px; +} +.open-meteo-card .no-data-icon { + font-size: 88px; +} +.open-meteo-card .no-data-text { + font-size: 16px; + font-family: "Segoe UI"; + font-weight: 400; +} +/* search dialog */ +.open-meteo-card .search-input { + padding: 8px 12px; + border: 1px solid #5e6070; + border-radius: 6px; + background-color: rgba(17, 17, 27, 0.1); + color: #cdd6f4; + font-family: "Segoe UI"; + font-size: 14px; +} +.open-meteo-card .search-input:focus { + border: 1px solid #89b4fa; + background-color: rgba(17, 17, 27, 0.2); +} +.open-meteo-card .search-results { + border: 1px solid #45475a00; + border-radius: 6px; + background-color: rgba(0, 0, 0, 0); + color: #cbced8; + font-size: 13px; + font-family: "Segoe UI"; +} +.open-meteo-card .search-results::item { + padding: 6px; +} +.open-meteo-card .search-results::item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.clock-widget .icon { + font-size: 14px; + padding-right: 4px; +} +.clock-widget .icon.alarm { + color: #f38ba8; + margin-left: 4px; +} +.clock-widget .label.alarm { + color: #74b0ff; + margin-left: 4px; +} + +/* Calendar, Alarm, and Timer Popups */ +.clock-popup.alarm, +.clock-popup.timer, +.clock-popup.calendar { + min-width: 460px; + background-color: var(--light-menu-bg); +} +.dark .clock-popup.alarm, +.dark .clock-popup.timer, +.dark .clock-popup.calendar { + background-color: var(--dark-menu-bg); +} +.clock-popup.calendar .calendar-table, +.clock-popup.calendar .calendar-table::item { background-color: rgba(17, 17, 27, 0); - color: rgba(162, 177, 196, 0.85); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: rgba(133, 144, 160, 0.85); + font-family: 'Segoe UI'; margin: 0; padding: 0; border: none; - outline: none; + outline: none; } -.calendar .calendar-table::item:selected { - color: rgb(255, 255, 255); - background-color: #007acc; - border-radius: 10px; +.dark .clock-popup.calendar .calendar-table, +.dark .clock-popup.calendar .calendar-table::item { + background-color: rgba(17, 17, 27, 0); + color: rgba(162, 177, 196, 0.85); } -.calendar .day-label { +.clock-popup.calendar .calendar-table::item:selected { + color: #282936; + font-weight: bold; + background-color: #74b0ff; + border-radius: 12px; +} +.clock-popup.calendar .day-label { margin-top: 20px; } -.calendar .day-label, -.calendar .month-label, -.calendar .date-label, -.calendar .week-label, -.calendar .holiday-label { +.clock-popup.calendar .day-label, +.clock-popup.calendar .month-label, +.clock-popup.calendar .year-label, +.clock-popup.calendar .date-label { font-family: 'Segoe UI'; font-size: 16px; - color: #fff; font-weight: 700; min-width: 180px; max-width: 180px; } -.calendar .week-label, -.calendar .holiday-label { - font-size: 12px; - font-weight: 600; - color: rgba(162, 177, 196, 0.85); -} -.calendar .holiday-label { - color: rgba(162, 177, 196, 0.85); - font-weight: 700; -} -.calendar .month-label { +.clock-popup.calendar .month-label { font-weight: normal; } -.calendar .date-label { +.clock-popup.calendar .year-label { + font-weight: normal; +} +.clock-popup.calendar .date-label { font-size: 88px; font-weight: 900; - color: rgb(255, 255, 255); margin-top: -20px; -} \ No newline at end of file +} + +/* Alarm and Timer Dialog Containers */ +.clock-popup.timer .clock-popup-container, +.clock-popup.alarm .clock-popup-container { + padding: 16px; +} +.clock-popup.timer .clock-popup-footer, +.clock-popup.alarm .clock-popup-footer { + padding: 16px; + border-top: 1px solid rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.3); +} +.clock-popup .clock-label-timer { + font-size: 13px; + font-family: 'Segoe UI'; + font-weight: 600; + color: #8d9196; +} +.clock-popup .clock-input-time { + font-size: 48px; + background-color: transparent; + border: none; + font-family: monospace, "Tahoma", "Segoe UI"; + font-weight: 600; + color: #ced3d8; +} +.clock-popup .clock-input-time.colon { + padding-bottom: 8px; +} + +/* Dialog Buttons */ +.clock-popup .button { + border-radius: 4px; + font-family: 'Segoe UI'; + font-weight: 600; + font-size: 13px; + min-height: 28px; + min-width: 64px; + margin: 4px 0; + background-color: rgba(255, 255, 255, 0.1); +} +.clock-popup .button.save, +.clock-popup .button.start, +.clock-popup .button.delete, +.clock-popup .button.cancel { + min-width: 120px; +} + +.clock-popup .button.save, +.clock-popup .button.start { + background-color: rgba(0, 110, 255, 0.5); + margin-right: 8px; +} + +.clock-popup .button.save:hover, +.clock-popup .button.start:hover { + background-color: rgba(0, 110, 255, 0.7); +} +.clock-popup .button.delete { + background-color: rgba(255, 80, 80, 0.5); +} +.clock-popup .button.delete:hover { + background-color: rgba(255, 80, 80, 0.7); +} +.clock-popup .button.is-alarm-enabled { + background-color: rgba(0, 110, 255, 0.5); +} +.clock-popup .button.is-alarm-enabled:hover { + background-color: rgba(0, 110, 255, 0.7); +} +.clock-popup .button.is-alarm-disabled { + background-color: rgba(255, 255, 255, 0.2); +} +.clock-popup .button.day { + background-color: rgba(255, 255, 255, 0.1); + max-height: 20px; + min-height: 20px; +} +.clock-popup .button.day:checked { + background-color: rgba(0, 110, 255, 0.5); +} +.clock-popup .button.quick-option { + background-color: rgba(255, 255, 255, 0.1); +} +.clock-popup .button.quick-option:checked { + background-color: rgba(0, 110, 255, 0.5); +} +.clock-popup .button:hover { + background-color: rgba(255, 255, 255, 0.2); +} +.clock-popup .button:disabled { + background-color: rgba(100, 100, 100, 0.2); + color: rgba(150, 150, 150, 0.7); +} +.clock-popup .alarm-input-title { + font-size: 14px; + font-family: 'Segoe UI'; + font-weight: 600; + color: #d2d6e2; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid transparent; + border-radius: 4px; + padding: 4px 8px; + margin-top: 8px; + outline: none; + min-width: 300px; +} + +.clock-popup .alarm-input-title:focus { + border: 1px solid #0078D4; +} + +/* Active Alarm Popup Window */ +.active-alarm-window { + background-color: rgba(255, 255, 255, 0.048); + max-width: 500px; + min-width: 500px; + padding: 32px; +} +.active-alarm-window .alarm-title-icon { + font-size: 64px; + color: #ffffff; + margin-bottom: 16px; +} +.active-alarm-window .alarm-title { + font-size: 24px; + font-family: 'Segoe UI'; + font-weight: 600; + color: #ffffff; + max-width: 500px; + min-width: 500px; +} +.active-alarm-window .alarm-info { + font-size: 16px; + font-family: 'Segoe UI'; + font-weight: 600; + color: #b2b6c0; + margin-bottom: 32px; +} +.active-alarm-window .button { + border-radius: 4px; + font-family: 'Segoe UI'; + font-weight: 600; + font-size: 14px; + min-height: 36px; + min-width: 100px; + margin: 0 4px; + background-color: rgba(255, 255, 255, 0.1); +} +.active-alarm-window .button:hover { + background-color: rgba(255, 255, 255, 0.3); +} + +.home-menu { + background-color: var(--light-menu-bg); +} +.dark .home-menu { + background-color: var(--dark-menu-bg); +} +.home-menu .menu-item { + color: var(--dark-color); + padding: 6px 48px 7px 16px; +} +.dark .home-menu .menu-item { + color: var(--light-color); +} + +.home-menu .menu-item:hover { + background-color: rgba(128, 130, 158, 0.15); + color: #fff; +} +.home-menu .separator { + max-height: 1px; + background-color: rgba(128, 130, 158, 0.3); +} + +.systray .button { + border-radius: 4px; + padding: 2px; + background: transparent; + border: none; + outline: none; +} + +.systray .button:hover { + background: rgba(255, 255, 255, 0.2); +} +.systray .button.drag-over { + background: rgba(255, 255, 255, 0.4); +} +.systray .pinned-container.drop-target { + background: rgba(255, 255, 255, 0.1); +} +.systray .unpinned-visibility-btn { + border-radius: 4px; + height: 20px; + width: 16px; + border: none; + outline: none; +} + +.systray .unpinned-visibility-btn:checked { + background: transparent; +} +.systray-popup .button.drag-over { + background-color: rgba(255, 255, 255, 0.2); +} +.systray .pinned-container.pinned-container.drop-target { + background-color: rgba(255, 255, 255, 0.1); +} +.systray-popup { + background-color: var(--light-menu-bg); + padding: 4px; +} +.dark .systray-popup { + background-color: var(--dark-menu-bg); +} +.systray-popup .button { + padding: 10px; + margin: 0; + border: 0; + border-radius: 6px; +} +.systray-popup .button:hover { + background-color: rgba(255, 255, 255, 0.3); +} +.dark .systray-popup .button:hover { + background-color: rgba(255, 255, 255, 0.05); +}