Skip to content

Revamped the Glass theme Waybar and Dock - GLASS Overhaul/Aero #1510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AvaCaine wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Revamped the Glass theme Waybar and Dock - GLASS Overhaul/Aero #1510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 50 additions & 50 deletions dotfiles/.config/nwg-dock-hyprland/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
21 changes: 15 additions & 6 deletions dotfiles/.config/nwg-dock-hyprland/launch.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
fi
72 changes: 43 additions & 29 deletions dotfiles/.config/nwg-dock-hyprland/themes/glass/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
8 changes: 4 additions & 4 deletions dotfiles/.config/waybar/themes/ml4w-glass/config
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": [
Expand All @@ -15,7 +15,7 @@
"modules-left": [
"custom/appmenu",
"hyprland/workspaces",
//"wlr/taskbar",
"wlr/taskbar",
//"group/quicklinks",
//"custom/nowplaying",
"custom/empty"
Expand Down
Loading