From 9c2f72366e27115c14424d38b75edf760c397a01 Mon Sep 17 00:00:00 2001 From: Ava Date: Wed, 4 Mar 2026 15:19:06 +0000 Subject: [PATCH] Added aero dock theme and revamped the waybar glass theme --- CHANGELOG.md | 8 + .../.config/nwg-dock-hyprland/aerolaunch.txt | 33 ++ dotfiles/.config/nwg-dock-hyprland/launch.sh | 1 + .../nwg-dock-hyprland/themes/aero/style.css | 61 +++ .../waybar/themes/ml4w-glass/style.css | 379 ++++-------------- 5 files changed, 171 insertions(+), 311 deletions(-) create mode 100644 dotfiles/.config/nwg-dock-hyprland/aerolaunch.txt create mode 100644 dotfiles/.config/nwg-dock-hyprland/themes/aero/style.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 36772133b..7560d2143 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +Version 2.12.0 +-------------------------------------------------------- +- Tweaked ml4w-glass waybar theme +- Added a dock theme +- Added a custom launch.sh for new aero theme (dock) + + Version 2.11.1 -------------------------------------------------------- - Compatible with Hyprland 0.54.x @@ -8,6 +15,7 @@ Version 2.11.1 - New keybinding: SUPER+SHIFT+M to toggle between dark and light mode - Hyprshade replaced with Hyprsunset. Configuration in ~./config/hypr/hyprsunset.conf (can be restored for updates) + Version 2.11.0 -------------------------------------------------------- - The SDDM script can copy the current wallpaper to SDDM and use it as a background image. Start the script with ~/.config/ml4w/scripts/ml4w-install-sddm or from the Welcome App/Settings/Display Manager diff --git a/dotfiles/.config/nwg-dock-hyprland/aerolaunch.txt b/dotfiles/.config/nwg-dock-hyprland/aerolaunch.txt new file mode 100644 index 000000000..ff1071aba --- /dev/null +++ b/dotfiles/.config/nwg-dock-hyprland/aerolaunch.txt @@ -0,0 +1,33 @@ +#!/usr/bin/env bash +# ___ __ +# / _ \___ ____/ /__ +# / // / _ \/ __/ '_/ +# /____/\___/\__/_/\_\ +# + +DOCK_THEME="modern" +if [ -f $HOME/.config/ml4w/settings/dock-theme ]; then + DOCK_THEME=$(cat $HOME/.config/ml4w/settings/dock-theme) +fi + +echo ":: Using Dock Theme $DOCK_THEME" + +if [ ! -f $HOME/.config/ml4w/settings/dock-disabled ]; then + killall nwg-dock-hyprland + sleep 0.5 + + # -f: Force full width to reach edges + # -mb 10: Bottom margin (matches your gap) + # -ml 10: Left margin (matches your gap) + # -mr 10: Right margin (matches your gap) + # -w 20: High icon wrap count to ensure it stays a single long bar + # -c: Launcher script path + + if [ -f $HOME/.config/ml4w/settings/dock-autohide ]; then + nwg-dock-hyprland -d -i 32 -f -mb 10 -ml 10 -mr 10 -w 20 -x -s themes/$DOCK_THEME/style.css -c "$HOME/.config/hypr/scripts/launcher.sh" + else + nwg-dock-hyprland -i 32 -f -mb 10 -ml 10 -mr 10 -w 20 -x -s themes/$DOCK_THEME/style.css -c "$HOME/.config/hypr/scripts/launcher.sh" + fi +else + echo ":: Dock disabled" +fi diff --git a/dotfiles/.config/nwg-dock-hyprland/launch.sh b/dotfiles/.config/nwg-dock-hyprland/launch.sh index 56cb25c49..1c79fefb0 100755 --- a/dotfiles/.config/nwg-dock-hyprland/launch.sh +++ b/dotfiles/.config/nwg-dock-hyprland/launch.sh @@ -21,4 +21,5 @@ if [ ! -f $HOME/.config/ml4w/settings/dock-disabled ]; then fi else echo ":: Dock disabled" + echo "It is recommended to use the aerolaunch.txt and rename it to launch.sh, with launch.sh renamed to anything else, when using the Aero theme." fi \ No newline at end of file diff --git a/dotfiles/.config/nwg-dock-hyprland/themes/aero/style.css b/dotfiles/.config/nwg-dock-hyprland/themes/aero/style.css new file mode 100644 index 000000000..f10ad6105 --- /dev/null +++ b/dotfiles/.config/nwg-dock-hyprland/themes/aero/style.css @@ -0,0 +1,61 @@ +@import url("../../colors.css"); +@import url("../../../ml4w/settings/dock-border.css"); + +window { + background: none; + border: none; + box-shadow: none; + /* Reduced vertical margin to keep it tight to the screen edge */ + margin: 4px 0px; + padding: 0; +} + +#box { +/* * Vertical padding reduced to 2px (top/bottom) + * Horizontal padding kept at 300px to maintain the 'long' look + */ +padding: 2px 300px; +margin: 0px 0px; +border-radius: 24px; + +/* WAYBAR SHADING LOGIC */ +background: +linear-gradient(to bottom, alpha(white, 0.15) 0%, transparent 40%, alpha(black, 0.1) 100%) padding-box, +radial-gradient(circle at 50% 250%, alpha(darker(@surface), 0.5), @surface) padding-box, +linear-gradient(to bottom, @primary, alpha(@on_primary, 0.7)) border-box; + +border: 1px solid transparent; +background-clip: padding-box, padding-box, border-box; +background-origin: border-box; + +opacity: 0.95; +box-shadow: none; +border-top: 1px solid rgba(255, 255, 255, 0.3); +} + +button { + color: @on_surface; + border-radius: 8px; + /* Reduced vertical margin for buttons to 2px */ + margin: 2px 10px; + padding: 6px; + transition: all 0.2s ease; + background: transparent; + border: 0px; +} + +button:hover { + background: linear-gradient(to bottom, alpha(white, 0.2), transparent); + border: 1px solid alpha(white, 0.3); + box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.2); +} + +#active { +border-bottom: 2px solid @primary; +background: linear-gradient(to top, alpha(@primary, 0.2), transparent); +} + +image { + background: none; + border: none; +} diff --git a/dotfiles/.config/waybar/themes/ml4w-glass/style.css b/dotfiles/.config/waybar/themes/ml4w-glass/style.css index 821fba5e3..e6bef37b8 100644 --- a/dotfiles/.config/waybar/themes/ml4w-glass/style.css +++ b/dotfiles/.config/waybar/themes/ml4w-glass/style.css @@ -1,4 +1,4 @@ -/* +/*/* * __ __ _ ____ _ _ * \ \ / /_ _ _ _| |__ __ _ _ __ / ___|| |_ _ _| | ___ * \ \ /\ / / _` | | | | '_ \ / _` | '__| \___ \| __| | | | |/ _ \ @@ -7,363 +7,120 @@ * |___/ |___/ * * ----------------------------------------------------- - * General + * General & Variables * ----------------------------------------------------- */ - * { +* { font-family: "Fira Sans Semibold", "Font Awesome 7 Free", "Font Awesome 7 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome, "Material Icons", Roboto, Helvetica, Arial, sans-serif; border: none; border-radius: 0px; } window#waybar { - background:transparent; -} - -.modules-left { - background-color: @surface; - border-radius: 12px; - background: radial-gradient(circle at 50% 250%, alpha(darker(@surface),0.9), alpha(@surface_dim,0.9)) padding-box, - linear-gradient(@primary,@on_primary) border-box; - border: 1px solid transparent; - opacity:0.8; - padding:0px; - margin:10px; - box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.2); -} - -.modules-right { - background-color: @surface; - border-radius: 12px; - background: radial-gradient(circle at 50% 250%, alpha(darker(@surface),0.9), alpha(@surface_dim,0.9)) padding-box, - linear-gradient(@primary,@on_primary) border-box; - border: 1px solid transparent; - opacity:0.8; - padding:0px; - margin:10px; - box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3); -} - -.modules-center { background-color: @surface; - border-radius: 12px; - background: radial-gradient(circle at 50% 250%, alpha(darker(@surface),0.9), alpha(@surface_dim,0.9)) padding-box, - linear-gradient(@primary,@on_primary) border-box; - border: 1px solid transparent; - opacity:0.8; - margin:10px; - box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.2); -} - -label.module { - font-size: 14px; - margin-left: 8px; - margin-right: 8px; - border-radius: 5px; -} - -/* -label.module { - font-size: 14px; - color: @on_surface; - padding:3px 10px; - transition: all 0.3s ease-out; - background: radial-gradient(circle at 50% 250%, @on_tertiary_fixed_variant, @on_tertiary_fixed) padding-box, - linear-gradient(@on_primary_fixed_variant, @on_primary_fixed) border-box; - border-radius: 10px; - border: 0px solid transparent; -} - -label.module:hover { -} -*/ + border-radius: 24px; -/* ----------------------------------------------------- - * Workspaces - * ----------------------------------------------------- */ - -#workspaces { - padding: 5px 3px 5px 3px; - min-width: 176px; -} - -#workspaces button { - color: @on_surface; - border-radius: 3px; - padding:0px 5px 0px 5px; - margin:0px 2px 0px 2px; - transition: all 0.3s ease-in-out; - border: 1px solid transparent; -} + /* FIX: Brighter Gradient - reduced the 'darker' alpha to stop the bottom-half darkness */ + background: radial-gradient(circle at 50% -50%, alpha(white, 0.15), transparent) padding-box, + radial-gradient(circle at 50% 150%, alpha(@surface, 0.5), @surface) padding-box, + linear-gradient(to bottom, @primary, alpha(@on_primary, 0.6)) border-box; -#workspaces button.active { - background:alpha(@primary,0.2); border: 1px solid transparent; - transition: all 0.3s ease-in-out; - min-width: 30px; - border-radius: 8px; - box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.8); -} - -#workspaces button:hover { - background:alpha(@secondary,0.2); - border-radius: 15px; -} - -/* ----------------------------------------------------- - * Tooltips - * ----------------------------------------------------- */ - -tooltip { - background-color: @surface; - border-radius: 12px; - background: radial-gradient(circle at 50% 250%, @surface, @surface_dim) padding-box, - linear-gradient(#FFFFFF,@on_primary) border-box; - border: 1px solid transparent; - opacity:0.7; - margin:10px; -} - -tooltip label { - color: @on_surface; -} - -/* ----------------------------------------------------- - * Window - * ----------------------------------------------------- */ - -#window { -} - -window#waybar.empty #window { - background-color:transparent; -} - -/* ----------------------------------------------------- - * Taskbar - * ----------------------------------------------------- */ - -#taskbar { - padding: 5px 0px 5px 0px; -} - -#taskbar button { - border-radius: 6px; - padding:0px 5px 0px 5px; -} - -#taskbar button:hover { - background:@primary; - color:@on_primary; -} + opacity: 0.9; + margin: 3px; + min-height: 38px; -#taskbar.empty { + /* 3D SHINE FOR BACKGROUND: Subtle white outer glow to lift the whole bar */ + box-shadow: 0px 4px 15px -50px rgba(0, 0, 0, 0.5), + 0px 0px 5px rgba(255, 255, 255, 0.1); } -/* ----------------------------------------------------- - * ML4W Icon - * ----------------------------------------------------- */ - -#custom-ml4w-welcome { - margin-top:5px; - margin-bottom:5px; - background-image: url("../assets/ml4w-icon.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - padding-right: 20px; -} - -/* ----------------------------------------------------- - * Idle Inhibitor - * ----------------------------------------------------- */ - -#idle_inhibitor { -} - -#idle_inhibitor.activated { -} - -/* ----------------------------------------------------- - * App Launcher - * ----------------------------------------------------- */ - -#custom-appmenu { - padding-right:3px; - padding-left:5px; -} - -#custom-appmenu:hover { -} +.modules-left, .modules-center, .modules-right { + border-radius: 24px; -/* ----------------------------------------------------- - * Custom Now Playing - * ----------------------------------------------------- */ + /* 3D MODULE SHINE: Layered gradients for a "curved glass" look */ + background: linear-gradient(to bottom, alpha(white, 0.15) 0%, transparent 40%, alpha(black, 0.1) 100%) padding-box, + radial-gradient(circle at 50% 250%, alpha(darker(@surface), 0.5), @surface) padding-box, + linear-gradient(to bottom, @primary, alpha(@on_primary, 0.7)) border-box; -#custom-nowplaying { -} - -#custom-nowplaying.playing { -} - -#custom-nowplaying.paused { -} - -/* ----------------------------------------------------- - * Custom Notification - * ----------------------------------------------------- */ + border: 1px solid transparent; -#custom-notification { - font-size: 20px; - font-family: "Material Icons"; - color: @icon_color; -} + margin: 6px; + padding: 0px 12px; -/* ----------------------------------------------------- - * Custom Exit - * ----------------------------------------------------- */ + /* THE DRAMATIC 3D SHADOW: + * 1. Dark drop shadow for depth. + * 2. White outer glow (0px 0px 4px) to make the edges pop. + * 3. Sharp white inset at the top for the 'glass' rim. */ + box-shadow: 0px -23px 6px -50px rgba(0, 0, 0, 0.8), + 0px 0px 4px rgba(255, 255, 255, 0.2), + inset 0px 1px 1px rgba(255, 255, 255, 0.4), + inset 0px -1px 2px rgba(0, 0, 0, 0.2); -#custom-exit { + background-clip: padding-box, border-box; + background-origin: border-box; } /* ----------------------------------------------------- - * Custom Updates + * Module Specific Spacing * ----------------------------------------------------- */ -#custom-updates.yellow { - border-radius: 8px; - margin:5px 0px 5px 5px; - padding:0px 6px 0px 6px; - background-color: @secondary; - color: @on_secondary; +.modules-right label, .modules-right image { + margin: 0 6px; } -#custom-updates.red { - border-radius: 8px; - margin:6px 0px 6px 7px; - padding:0px 6px 0px 6px; - background-color: @error; - color:@on_error; +label.module { + font-size: 13px; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); /* Makes text pop against glass */ } /* ----------------------------------------------------- - * Hardware Group + * Workspaces * ----------------------------------------------------- */ -#disk,#memory,#cpu,#language { - margin:0px; - padding:0px; +#workspaces { +padding: 2px 4px; } -#language { +#workspaces button { +color: @on_surface; +border-radius: 8px; +margin: 0 3px; +padding: 0 6px; +transition: all 0.2s ease; } -/* ----------------------------------------------------- - * Power Profiles Daemon - * ----------------------------------------------------- */ - -#power-profiles-daemon { +#workspaces button.active { +background: linear-gradient(to bottom, alpha(white, 0.2), transparent); +border: 1px solid alpha(white, 0.3); +box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.2), 0px 2px 4px rgba(0,0,0,0.3); } /* ----------------------------------------------------- - * Clock + * Tray & Clock * ----------------------------------------------------- */ #clock { - margin-left: 12px; - margin-right: 12px; -} - -#clock:hover { -} - -/* ----------------------------------------------------- - * Backlight - * ----------------------------------------------------- */ - -#backlight { -} - -#backlight:hover { +font-weight: bold; +padding: 0 10px; } -/* ----------------------------------------------------- - * Pulseaudio - * ----------------------------------------------------- */ - -#pulseaudio { -} - -#pulseaudio:hover { -} - -#pulseaudio.muted { -} - -/* ----------------------------------------------------- - * Network - * ----------------------------------------------------- */ - -#network { -} - -#network.ethernet:hover { -} - -#network.wifi:hover { -} - -#network.ethernet { -} - -#network.wifi { -} - -/* ----------------------------------------------------- - * Bluetooth - * ----------------------------------------------------- */ - -#bluetooth, #bluetooth.on, #bluetooth.connected { -} - -#bluetooth:hover { -} - -#bluetooth.off { -} - -/* ----------------------------------------------------- - * Battery - * ----------------------------------------------------- */ - -#battery { -} - -#battery.charging, #battery.plugged { -} - -@keyframes blink { - to { - background-color: @background; - color: @on_surface; - } -} - -#battery.critical:not(.charging) { -} - -/* ----------------------------------------------------- - * Tray - * ----------------------------------------------------- */ - #tray { - padding: 0px 5px 0px 10px; +padding: 0 10px; } -#tray > .passive { - -gtk-icon-effect: dim; +tooltip { + background: @surface; + border: 1px solid @primary; + border-radius: 12px; + text-shadow: none; } -#tray > .needs-attention { - -gtk-icon-effect: highlight; +#custom-notification { +margin: 0px 11px 0px 0px; +padding: 0px; +font-size: 20px; +font-family: "Material Icons"; +color: @icon_color; } +