histalek/dotfiles
histalek/dotfiles
1
0
Fork 0
Code Releases Activity

feat(waybar): Give waybar a new look and simplify modules

Browse source
This commit is contained in:
histalek 2023-11-21 12:38:10 +01:00
parent 98171e211b
commit 5d8df44e7c
Signed by: histalek
SSH key fingerprint: SHA256:6a6N2Wzk73nwURUHC/ubbCyqdB6yfie0Jv/NGvRcsIE
3 changed files with 155 additions and 343 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.config/sway/conf.d/1-set
View file

@ -12,7 +12,6 @@ set $down j
set $up k set $up k
set $right l set $right l
#set $term alacritty
set $term foot set $term foot
## Define outputs ## Define outputs
@ -36,7 +35,7 @@ set $wsF1 11: 
set $wsF2 12:󰋎 set $wsF2 12:󰋎
set $wsF3 13: set $wsF3 13:
set $wsF4 14:14 set $wsF4 14:14
set $wsF5 15: set $wsF5 15:
set $wsF6 16: set $wsF6 16:
set $wsF7 17:󰙯 set $wsF7 17:󰙯
set $wsF8 18:18 set $wsF8 18:18

65
.config/waybar/config
View file

@ -6,59 +6,37 @@
"modules-left": [ "modules-left": [
"sway/mode", "sway/mode",
"sway/workspaces", "sway/workspaces",
"custom/arrowworkspaces",
"sway/window" "sway/window"
], ],
"modules-right": [ "modules-right": [
"custom/arrowtray",
"tray", "tray",
"custom/arrowpackages",
"custom/flatpak", "custom/flatpak",
"custom/packages", "custom/packages",
"custom/arrowcpu",
"cpu", "cpu",
"custom/arrowmemory",
"memory", "memory",
"custom/arrowpulseaudio",
"pulseaudio", "pulseaudio",
"custom/arrowdate", "clock",
"clock#date",
"custom/arrowtime",
"clock#time",
], ],
"sway/mode": { "sway/mode": {
"format": "<span style='italic'> {}</span>", "format": " {}",
"tooltip": false,
}, },
"sway/workspaces": { "sway/workspaces": {
"disable-scroll": true, "disable-scroll": true,
"disable-click": true, "disable-click": true,
"format-icons": {
"urgent": "",
"focused": "",
"default": "",
},
}, },
"sway/window": { "sway/window": {
"format": "{}", "format": "{}",
"max-length": 50, "max-length": 50,
"tooltip": false,
}, },
"tray": { "tray": {
"icon-size": 22, "icon-size": 22,
"spacing": 10, "spacing": 5,
}, },
"clock#date": { "clock": {
"interval": 60,
"format": "{:%a %e.%b.%Y}",
"tooltip": false,
},
"clock#time": {
"interval": 10, "interval": 10,
"format": "{:%R}", "format": "{:%a %e.%b.%Y %R}",
"tooltip": false,
}, },
"cpu": { "cpu": {
"interval": 5, "interval": 5,
@ -110,37 +88,4 @@
"signal": 8, "signal": 8,
"tooltip": false, "tooltip": false,
}, },
"custom/arrowtime": {
"format": "",
"tooltip": false
},
"custom/arrowdate": {
"format": "",
"tooltip": false
},
"custom/arrowpulseaudio": {
"format": "",
"tooltip": false
},
"custom/arrowmemory": {
"format": "",
"tooltip": false
},
"custom/arrowcpu": {
"format": "",
"tooltip": false
},
"custom/arrowpackages": {
"format": "",
"tooltip": false
},
"custom/arrowtray": {
"format": "",
"tooltip": false
},
"custom/arrowworkspaces": {
"format": "",
"tooltip": false
},
} }

250
.config/waybar/style.css
View file

@ -1,124 +1,74 @@
/* /* -----------------------------------------------------
* Ref.: https://git.sr.ht/~begs/dotfiles/tree/1c92a56187a56c8531f04dea17c5f96acd9e49c4/item/.config/waybar/style.css * General
*/ * ----------------------------------------------------- */
* {
font-size: 14px;
font-family: JetBrainsMono Nerd Font;
}
/* ============================================================================= @define-color basecolor #f8f8f2;
* @define-color focused #8084a8;
* Waybar configuration @define-color warning #fabd2f;
* @define-color critical #cc241d;
* Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
*
* =========================================================================== */
/* ----------------------------------------------------------------------------- window#waybar {
* Keyframes background-color: rgba(40, 42, 54, 0.4);
* -------------------------------------------------------------------------- */ border-bottom: 1px solid rgba(40, 42, 55, 0.1);
border-radius: 0px;
color: @basecolor;
}
@keyframes blink-warning { @keyframes blink-warning {
70% { 70% {
color: @light; color: @basecolor;
} }
to { to {
color: @light; color: @basecolor;
background-color: @warning; background-color: @warning;
} }
} }
@keyframes blink-critical { @keyframes blink-critical {
70% { 70% {
color: @light; color: @basecolor;
} }
to { to {
color: @light; color: @basecolor;
background-color: @critical; background-color: @critical;
} }
} }
/* -----------------------------------------------------
/* ----------------------------------------------------------------------------- * Workspaces
* Styles * ----------------------------------------------------- */
* -------------------------------------------------------------------------- */ #workspaces {
background-color: inherit;
/* COLORS */
/* Nord */
/*@define-color light #eceff4;
@define-color dark #2e3440;
@define-color warning #ebcb8b;
@define-color critical #d08770;
@define-color mode #4c566a;
@define-color workspaces #5e81ac;
@define-color workspacesfocused #81a1c1;
@define-color sound #d8dee9;
@define-color memory #88c0d0;
@define-color cpu #434c5e;
@define-color temp #d8dee9;
@define-color layout #5e81ac;
@define-color battery #88c0d0;
@define-color date #2e3440;
@define-color time #eceff4;*/
/* Gruvbox */
@define-color light #ebdbb2;
@define-color dark #282828;
@define-color warning #fabd2f;
@define-color critical #cc241d;
@define-color mode #a89984;
@define-color workspaces #458588;
@define-color workspacesfocused #83a598;
@define-color sound #d3869b;
@define-color memory #8ec07c;
@define-color cpu #98971a;
@define-color packages #b8bb26;
@define-color layout #689d6a;
@define-color tray #282828;
@define-color date #282828;
@define-color time #ebdbb2;
/* Reset all styles */
* {
border: none;
border-radius: 0;
min-height: 0;
margin: 0;
padding: 0;
} }
/* waybar v0.19.4 workarounds */ #workspaces button.focused {
button { background: @focused;
box-shadow: none;
text-shadow: none;
/* Avoid rounded borders under each button name */
border: none;
border-radius: 0;
} }
/* The whole bar */ #workspaces button:hover {
#waybar { background: inherit;
/*background: transparent;*/
color: @light;
font-family: Iosevka, Terminus, Siji;
font-size: 10pt;
/*font-weight: bold;*/
} }
/* Each module */ /* -----------------------------------------------------
#battery, * Tooltips
#clock, * ----------------------------------------------------- */
#cpu, tooltip {
#memory, background: #282a36;
#mode, border: 1px solid #bd93f9;
#pulseaudio, border-radius: 10px;
#tray,
#custom-packages,
#custom-flatpak {
padding-left: 10px;
padding-right: 10px;
} }
/* Each module that should blink */ tooltip label {
color: @basecolor;
}
/* -----------------------------------------------------
* Blinking modules
* ----------------------------------------------------- */
#mode, #mode,
#memory { #memory {
animation-timing-function: linear; animation-timing-function: linear;
@ -126,127 +76,45 @@ button {
animation-direction: alternate; animation-direction: alternate;
} }
/* Each critical module */
#memory.critical, #memory.critical,
#cpu.critical { #cpu.critical {
color: @critical; color: @critical;
} }
/* Each critical that should blink */
#mode, #mode,
#memory.critical { #memory.critical {
animation-name: blink-critical; animation-name: blink-critical;
animation-duration: 2s; animation-duration: 2s;
} }
/* Each warning */
#memory.warning, #memory.warning,
#cpu.warning { #cpu.warning {
color: @warning; color: @warning;
} }
/* And now modules themselves in their respective order */ /* -----------------------------------------------------
* Window
#mode { /* Shown current Sway mode (resize etc.) */ * ----------------------------------------------------- */
color: @light;
background: @mode;
}
/* Workspaces stuff */
#workspaces button {
padding-left: 4px;
padding-right: 4px;
color: @dark;
background: @workspaces;
}
#workspaces button.focused {
background: @workspacesfocused;
}
#window { #window {
margin-right: 40px; color: @basecolor;
margin-left: 40px; padding: 4px 10px;
} }
#pulseaudio { #custom-packages, #custom-flatpak {
background: @sound; color: #ff79c6;
color: @dark; padding: 4px 10px;
} }
#memory { #memory, #cpu {
background: @memory; color: #8be9fd;
color: @dark; padding: 4px 10px;
} }
#cpu { #clock {
background: @cpu; color: #50fa7b;
color: @dark; padding: 4px 10px;
} }
#tray { #tray {
background: @tray; padding: 2px 10px;
} }
#clock.date {
background: @date;
color: @light;
}
#clock.time {
background: @time;
color: @dark;
}
#custom-packages,
#custom-flatpak {
background: @packages;
color: @dark;
}
#custom-arrowtray {
font-size: 24px;
color: @tray;
}
#custom-arrowpackages {
font-size: 24px;
color: @packages;
background: @tray;
}
#custom-arrowcpu {
font-size: 24px;
color: @cpu;
background: @packages;
}
#custom-arrowmemory {
font-size: 24px;
color: @memory;
background: @cpu;
}
#custom-arrowpulseaudio {
font-size: 24px;
color: @sound;
background: @memory;
}
#custom-arrowdate {
font-size: 24px;
color: @date;
background: @sound;
}
#custom-arrowtime {
font-size: 24px;
color: @time;
background: @date;
}
#custom-arrowworkspaces {
font-size: 24px;
color: @workspaces;
}