diff --git a/dotfiles/.config/nwg-dock-hyprland/colors.css b/dotfiles/.config/nwg-dock-hyprland/colors.css index 208948f0b..9c26d243c 100644 --- a/dotfiles/.config/nwg-dock-hyprland/colors.css +++ b/dotfiles/.config/nwg-dock-hyprland/colors.css @@ -2,105 +2,105 @@ * Css Colors * Generated with Matugen */ -@define-color blur_background rgba(26, 17, 15, 0.3); -@define-color blur_background8 rgba(26, 17, 15, 0.8); +@define-color blur_background rgba(248, 249, 255, 0.3); +@define-color blur_background8 rgba(248, 249, 255, 0.8); - @define-color background #1a110f; + @define-color background #f8f9ff; - @define-color error #ffb4ab; + @define-color error #ba1a1a; - @define-color error_container #93000a; + @define-color error_container #ffdad6; - @define-color inverse_on_surface #392e2b; + @define-color inverse_on_surface #eff0f7; - @define-color inverse_primary #8f4c35; + @define-color inverse_primary #a0cafd; - @define-color inverse_surface #f1dfda; + @define-color inverse_surface #2e3135; - @define-color on_background #f1dfda; + @define-color on_background #191c20; - @define-color on_error #690005; + @define-color on_error #ffffff; - @define-color on_error_container #ffdad6; + @define-color on_error_container #410002; - @define-color on_primary #55200c; + @define-color on_primary #ffffff; - @define-color on_primary_container #ffdbd0; + @define-color on_primary_container #001d36; - @define-color on_primary_fixed #390c00; + @define-color on_primary_fixed #001d36; - @define-color on_primary_fixed_variant #723520; + @define-color on_primary_fixed_variant #184975; - @define-color on_secondary #442a21; + @define-color on_secondary #ffffff; - @define-color on_secondary_container #ffdbd0; + @define-color on_secondary_container #101c2b; - @define-color on_secondary_fixed #2c160e; + @define-color on_secondary_fixed #101c2b; - @define-color on_secondary_fixed_variant #5d4036; + @define-color on_secondary_fixed_variant #3b4858; - @define-color on_surface #f1dfda; + @define-color on_surface #191c20; - @define-color on_surface_variant #d8c2bb; + @define-color on_surface_variant #42474e; - @define-color on_tertiary #3a3005; + @define-color on_tertiary #ffffff; - @define-color on_tertiary_container #f3e2a7; + @define-color on_tertiary_container #251432; - @define-color on_tertiary_fixed #221b00; + @define-color on_tertiary_fixed #251432; - @define-color on_tertiary_fixed_variant #51461a; + @define-color on_tertiary_fixed_variant #523f5f; - @define-color outline #a08d87; + @define-color outline #73777f; - @define-color outline_variant #53433f; + @define-color outline_variant #c3c7cf; - @define-color primary #ffb59d; + @define-color primary #35618e; - @define-color primary_container #723520; + @define-color primary_container #d1e4ff; - @define-color primary_fixed #ffdbd0; + @define-color primary_fixed #d1e4ff; - @define-color primary_fixed_dim #ffb59d; + @define-color primary_fixed_dim #a0cafd; @define-color scrim #000000; - @define-color secondary #e7bdb0; + @define-color secondary #535f70; - @define-color secondary_container #5d4036; + @define-color secondary_container #d6e3f7; - @define-color secondary_fixed #ffdbd0; + @define-color secondary_fixed #d6e3f7; - @define-color secondary_fixed_dim #e7bdb0; + @define-color secondary_fixed_dim #bac8db; @define-color shadow #000000; - @define-color source_color #f96732; + @define-color source_color #7eb0e9; - @define-color surface #1a110f; + @define-color surface #f8f9ff; - @define-color surface_bright #423733; + @define-color surface_bright #f8f9ff; - @define-color surface_container #271d1b; + @define-color surface_container #eceef4; - @define-color surface_container_high #322825; + @define-color surface_container_high #e6e8ee; - @define-color surface_container_highest #3d322f; + @define-color surface_container_highest #e1e2e8; - @define-color surface_container_low #231917; + @define-color surface_container_low #f2f3f9; - @define-color surface_container_lowest #140c0a; + @define-color surface_container_lowest #ffffff; - @define-color surface_dim #1a110f; + @define-color surface_dim #d8dae0; - @define-color surface_tint #ffb59d; + @define-color surface_tint #35618e; - @define-color surface_variant #53433f; + @define-color surface_variant #dfe2eb; - @define-color tertiary #d7c68d; + @define-color tertiary #6b5778; - @define-color tertiary_container #51461a; + @define-color tertiary_container #f2daff; - @define-color tertiary_fixed #f3e2a7; + @define-color tertiary_fixed #f2daff; - @define-color tertiary_fixed_dim #d7c68d; + @define-color tertiary_fixed_dim #d6bee5; diff --git a/dotfiles/.config/nwg-dock-hyprland/launch.sh b/dotfiles/.config/nwg-dock-hyprland/launch.sh index 56cb25c49..b89b0d2d2 100755 --- a/dotfiles/.config/nwg-dock-hyprland/launch.sh +++ b/dotfiles/.config/nwg-dock-hyprland/launch.sh @@ -1,24 +1,33 @@ #!/usr/bin/env bash -# ___ __ +# ___ __ # / _ \___ ____/ /__ # / // / _ \/ __/ '_/ # /____/\___/\__/_/\_\ # -DOCK_THEME="modern" +DOCK_THEME="modern"what 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" -echo ":: Dock Autohide $DOCK_AUTOHIDE" + 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 + # -ml 10: Left margin + # -mr 10: Right margin + # -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 -w 5 -mb 10 -x -s themes/$DOCK_THEME/style.css -c "$HOME/.config/hypr/scripts/launcher.sh" + 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 -w 5 -mb 10 -x -s themes/$DOCK_THEME/style.css -c "$HOME/.config/hypr/scripts/launcher.sh" + 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 \ No newline at end of file +fi diff --git a/dotfiles/.config/nwg-dock-hyprland/themes/glass/style.css b/dotfiles/.config/nwg-dock-hyprland/themes/glass/style.css index a9a15306a..f10ad6105 100644 --- a/dotfiles/.config/nwg-dock-hyprland/themes/glass/style.css +++ b/dotfiles/.config/nwg-dock-hyprland/themes/glass/style.css @@ -2,46 +2,60 @@ @import url("../../../ml4w/settings/dock-border.css"); window { - padding: 10px; - 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; - border-radius: 1em; - margin:10px; + background: none; + border: none; + box-shadow: none; + /* Reduced vertical margin to keep it tight to the screen edge */ + margin: 4px 0px; + padding: 0; } #box { - /* Define attributes of the box surrounding icons here */ - padding: 8px; -} +/* * 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; -#active { - /* This is to underline the button representing the currently active window */ - border-bottom: solid 0px; - border-color: @primary; -} +/* 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; -button, image { - background: none; - border-style: none; - box-shadow: none; - color: @primary; +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 { - padding: 4px; - margin-left: 4px; - margin-right: 4px; - color: @primary; - font-size: 12px + 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-color: @primary_container; - border-radius: 10px; + 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); } -button:focus { - box-shadow: none; +#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/config b/dotfiles/.config/waybar/themes/ml4w-glass/config index daa8b9db2..d4d030133 100644 --- a/dotfiles/.config/waybar/themes/ml4w-glass/config +++ b/dotfiles/.config/waybar/themes/ml4w-glass/config @@ -1,10 +1,10 @@ { // General Settings "layer": "top", - "margin-top": 0, + "margin-top": 8, "margin-bottom": 0, - "margin-left": 0, - "margin-right": 0, + "margin-left": 8, + "margin-right": 8, "spacing": 0, // Load Modules "include": [ @@ -15,7 +15,7 @@ "modules-left": [ "custom/appmenu", "hyprland/workspaces", - //"wlr/taskbar", + "wlr/taskbar", //"group/quicklinks", //"custom/nowplaying", "custom/empty" diff --git a/dotfiles/.config/waybar/themes/ml4w-glass/style.css b/dotfiles/.config/waybar/themes/ml4w-glass/style.css index 821fba5e3..b11ce7368 100644 --- a/dotfiles/.config/waybar/themes/ml4w-glass/style.css +++ b/dotfiles/.config/waybar/themes/ml4w-glass/style.css @@ -1,369 +1,119 @@ /* - * __ __ _ ____ _ _ - * \ \ / /_ _ _ _| |__ __ _ _ __ / ___|| |_ _ _| | ___ - * \ \ /\ / / _` | | | | '_ \ / _` | '__| \___ \| __| | | | |/ _ \ - * \ V V / (_| | |_| | |_) | (_| | | ___) | |_| |_| | | __/ - * \_/\_/ \__,_|\__, |_.__/ \__,_|_| |____/ \__|\__, |_|\___| - * |___/ |___/ - * * ----------------------------------------------------- - * 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 { -} -*/ - -/* ----------------------------------------------------- - * Workspaces - * ----------------------------------------------------- */ + border-radius: 24px; -#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; -} - -#taskbar.empty { -} - -/* ----------------------------------------------------- - * 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; -} + opacity: 0.9; + margin: 3px; + min-height: 38px; -#custom-appmenu:hover { + /* 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); } -/* ----------------------------------------------------- - * Custom Now Playing - * ----------------------------------------------------- */ - -#custom-nowplaying { -} - -#custom-nowplaying.playing { -} +.modules-left, .modules-center, .modules-right { + border-radius: 24px; -#custom-nowplaying.paused { -} + /* 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 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 { -} - -/* ----------------------------------------------------- - * Pulseaudio - * ----------------------------------------------------- */ - -#pulseaudio { -} - -#pulseaudio:hover { -} - -#pulseaudio.muted { +font-weight: bold; +padding: 0 10px; } -/* ----------------------------------------------------- - * 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; } +