waybar and lots of theming
This commit is contained in:
fwastring
parent
90c13a0728
commit
3c7a01f264
6 changed files with 137 additions and 97 deletions
|
|
@ -19,6 +19,12 @@ in
|
|||
hyprland-qtutils
|
||||
waypipe
|
||||
wmenu
|
||||
playerctl
|
||||
];
|
||||
|
||||
|
||||
fonts.packages = with pkgs; [
|
||||
font-awesome
|
||||
];
|
||||
|
||||
services = {
|
||||
|
|
@ -53,7 +59,7 @@ in
|
|||
};
|
||||
rofi = {
|
||||
enable = true;
|
||||
font = lib.mkForce "ComicShannsMono Nerd Font 18";
|
||||
font = lib.mkForce "FiraCode Nerd Font 18";
|
||||
};
|
||||
};
|
||||
services = {
|
||||
|
|
@ -89,11 +95,11 @@ in
|
|||
splash = false;
|
||||
splash_offset = 2.0;
|
||||
|
||||
preload = [ "/home/fw/nix/wallpapers/blue.png" ];
|
||||
preload = [ "/home/fw/nix/wallpapers/nix-wallpaper-nineish-catppuccin-mocha.png" ];
|
||||
|
||||
wallpaper = [
|
||||
"DP-1,/home/fw/nix/wallpapers/blue.png"
|
||||
"eDP-1,/home/fw/nix/wallpapers/blue.png"
|
||||
"DP-1,/home/fw/nix/wallpapers/nix-wallpaper-nineish-catppuccin-mocha.png"
|
||||
"eDP-1,/home/fw/nix/wallpapers/nix-wallpaper-nineish-catppuccin-mocha.png"
|
||||
];
|
||||
};
|
||||
};
|
||||
|
|
@ -121,8 +127,8 @@ in
|
|||
};
|
||||
|
||||
general = {
|
||||
gaps_in = 15;
|
||||
gaps_out = 15;
|
||||
gaps_in = 7;
|
||||
gaps_out = 14;
|
||||
border_size = 2;
|
||||
layout = "dwindle";
|
||||
allow_tearing = true;
|
||||
|
|
@ -263,7 +269,7 @@ in
|
|||
"$mod, j, movefocus, d"
|
||||
|
||||
# Applications
|
||||
"$mod, q, exec, ${pkgs.firefox}/bin/firefox"
|
||||
"$mod, q, exec, ${pkgs.librewolf}/bin/librewolf"
|
||||
"$mod, d, exec, ${pkgs.rofi}/bin/rofi -show drun -p 'Run: '"
|
||||
|
||||
# Screencapture
|
||||
|
|
|
|||
|
|
@ -1,107 +1,124 @@
|
|||
/* -------- Catppuccin Mocha Palette -------- */
|
||||
@define-color mocha-base #1E1E2E;
|
||||
@define-color mocha-mantle #181825;
|
||||
@define-color mocha-crust #11111B;
|
||||
@define-color mocha-text #CDD6F4;
|
||||
@define-color mocha-subtext0 #A6ADC8;
|
||||
|
||||
@define-color mocha-green #A6E3A1;
|
||||
@define-color mocha-yellow #F9E2AF;
|
||||
@define-color mocha-sky #89DCEB;
|
||||
@define-color mocha-rose #F38BA8;
|
||||
@define-color mocha-blue #89B4FA;
|
||||
@define-color mocha-surface2 #585B70;
|
||||
@define-color mocha-peach #fab387;
|
||||
|
||||
/* -------- Base Styles -------- */
|
||||
* {
|
||||
/* `otf-font-awesome` is required to be installed for icons */
|
||||
font-family: FiraCode Nerd Font Bold, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #4C4F69; /* Default text color */
|
||||
font-family: "FiraCode Nerd Font Bold", "Font Awesome 7 Free Regular", sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background-color: #EFF1F5; /* Catppuccin Base */
|
||||
border-bottom: 3px solid #B2BCC8; /* Catppuccin Crust */
|
||||
color: #4C4F69; /* Default text color */
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.5s;
|
||||
background: @mocha-base;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
|
||||
transition: background-color .35s ease, color .35s ease;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2;
|
||||
window#waybar.hidden { opacity: 0.2; }
|
||||
|
||||
window#waybar.termite { background: @mocha-mantle; }
|
||||
window#waybar.chromium { background: @mocha-base; border: none; }
|
||||
|
||||
/* -------- Module “pill” look -------- */
|
||||
#workspaces, #clock, #mpris {
|
||||
background: @mocha-mantle;
|
||||
border: 1px solid @mocha-surface2;
|
||||
border-radius: 10px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
window#waybar.termite {
|
||||
background-color: #D7DBE6; /* Catppuccin Mantle */
|
||||
}
|
||||
|
||||
window#waybar.chromium {
|
||||
background-color: #B2BCC8; /* Catppuccin Crust */
|
||||
border: none;
|
||||
/* consistent gaps between modules */
|
||||
.modules-left > widget, .modules-right > widget {
|
||||
margin: 0 6px;
|
||||
}
|
||||
.modules-left > widget:first-child { margin-left: 0; }
|
||||
.modules-right > widget:last-child { margin-right: 0; }
|
||||
|
||||
/* -------- Buttons (generic) -------- */
|
||||
/* Buttons */
|
||||
button {
|
||||
/* Use box-shadow instead of border so the text isn't offset */
|
||||
box-shadow: inset 0 -3px transparent;
|
||||
/* Avoid rounded borders under each button name */
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #4C4F69; /* Default text color */
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: @mocha-text;
|
||||
transition: background-color .2s ease, box-shadow .2s ease;
|
||||
box-shadow: inset 0 -3px transparent;
|
||||
}
|
||||
|
||||
/* Hover effect for buttons */
|
||||
/* hover */
|
||||
button:hover {
|
||||
background: inherit;
|
||||
box-shadow: inset 0 -3px #F9E2AF; /* Catppuccin Yellow for hover effect */
|
||||
background: rgba(255,255,255,0.08);
|
||||
box-shadow: inset 0 -3px @mocha-peach;
|
||||
}
|
||||
|
||||
/* Workspace button styles */
|
||||
#workspaces button {
|
||||
padding: 0 5px;
|
||||
background-color: transparent;
|
||||
color: #4C4F69; /* Default text color */
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
/* active (no CSS transform in GTK; simulate press with padding + shadow) */
|
||||
button:active {
|
||||
padding-top: 1px; /* nudge down visually */
|
||||
padding-bottom: 1px; /* keep height stable */
|
||||
box-shadow: inset 0 -2px @mocha-peach;
|
||||
color: @mocha-base;
|
||||
}
|
||||
|
||||
/* Hover effect for workspace buttons */
|
||||
#workspaces button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Focused or active workspace styles */
|
||||
#workspaces button.focused, #workspaces button.active {
|
||||
background-color: #A6E3A1; /* Catppuccin Green for active workspace */
|
||||
box-shadow: inset 0 -3px #76C7E3; /* Catppuccin Sky for focus highlight */
|
||||
color: #4C4F69; /* Default text color */
|
||||
}
|
||||
|
||||
/* Urgent workspace styles */
|
||||
#workspaces button.urgent {
|
||||
background-color: #F28A8C; /* Catppuccin Rose for urgent workspace */
|
||||
}
|
||||
|
||||
/* Mode (e.g., dark/light mode indicator) */
|
||||
#mode {
|
||||
background-color: #A6E3A1; /* Catppuccin Green */
|
||||
box-shadow: inset 0 -3px #F9E2AF; /* Catppuccin Yellow for highlight */
|
||||
}
|
||||
|
||||
/* Spacing for workspaces and other modules */
|
||||
#clock,
|
||||
#window,
|
||||
/* -------- Workspaces -------- */
|
||||
#workspaces {
|
||||
margin: 0 4px;
|
||||
padding: 4px 6px;
|
||||
background: @mocha-mantle;
|
||||
}
|
||||
|
||||
/* If workspaces is the leftmost module, omit left margin */
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: 0;
|
||||
#workspaces button {
|
||||
padding: 2px 8px;
|
||||
margin: 0 2px;
|
||||
border-radius: 8px;
|
||||
transition: background-color .2s ease, box-shadow .2s ease;
|
||||
}
|
||||
|
||||
/* If workspaces is the rightmost module, omit right margin */
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: 0;
|
||||
#workspaces button:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
#workspaces button.active, #workspaces button.focused {
|
||||
background: @mocha-peach;
|
||||
color: @mocha-base;
|
||||
box-shadow: inset 0 -3px @mocha-peach;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
background: @mocha-rose;
|
||||
color: @mocha-base;
|
||||
box-shadow: inset 0 -3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* -------- Clock -------- */
|
||||
#clock {
|
||||
background-color: #F9E2AF; /* Catppuccin Yellow for clock */
|
||||
color: #4C4F69; /* Default text color */
|
||||
font-family: FiraCode Nerd Font Bold, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #4C4F69; /* Default text color */
|
||||
background: @mocha-peach;
|
||||
color: @mocha-base;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* Keyframes for blinking effect (e.g., battery critical) */
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: #F9E2AF; /* Catppuccin Yellow */
|
||||
color: #4C4F69; /* Default text color */
|
||||
}
|
||||
/* -------- Clock -------- */
|
||||
#mpris {
|
||||
background: @mocha-peach;
|
||||
color: @mocha-base;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* -------- Helpers -------- */
|
||||
@keyframes blink {
|
||||
to { background-color: @mocha-peach; color: @mocha-base; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,29 @@
|
|||
{
|
||||
"layer": "top",
|
||||
"position": "top",
|
||||
|
||||
"modules-left": ["hyprland/workspaces"],
|
||||
"modules-right": ["clock"]
|
||||
"modules-right": ["mpris","clock"],
|
||||
"mpris": {
|
||||
"player": "Feishin",
|
||||
"format": "{player_icon} {artist} — {title}",
|
||||
"format-paused": "{player_icon} {title}",
|
||||
"format-stopped": "",
|
||||
"player-icons": { "default": "", "Feishin": "" },
|
||||
"max-length": 45,
|
||||
"interval": 1,
|
||||
"tooltip": true,
|
||||
"tooltip-format": "{player} — {status}\n{artist}\n{title}\n{album}",
|
||||
"on-click": "playerctl -p Feishin play-pause",
|
||||
"on-scroll-up": "playerctl -p Feishin next",
|
||||
"on-scroll-down": "playerctl -p Feishin previous"
|
||||
},
|
||||
|
||||
"clock": {
|
||||
"format": "{:%c}",
|
||||
"locale": "sv_SE.UTF-8",
|
||||
"tooltip": true,
|
||||
"tooltip-format": "{:%A, %d %B %Y}\n %H:%M:%S",
|
||||
"interval": 1
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
{
|
||||
programs.ssh = {
|
||||
enable = true;
|
||||
enableDefaultConfig = false;
|
||||
matchBlocks = {
|
||||
"lth" = {
|
||||
hostname = "login.student.lth.se";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue