waybar: Restyle waybar
This commit is contained in:
parent
4888cec588
commit
4360d0ac09
2 changed files with 359 additions and 7 deletions
|
|
@ -1,13 +1,46 @@
|
||||||
{
|
{
|
||||||
"layer": "top",
|
"layer": "top",
|
||||||
"position": "top",
|
"position": "top",
|
||||||
"height": 28,
|
"height": 31,
|
||||||
"modules-left": ["sway/workspaces"],
|
|
||||||
"modules-center": ["sway/window"],
|
"modules-left": [
|
||||||
"modules-right": ["tray", "cpu", "memory", "network", "pulseaudio", "clock"],
|
"sway/mode",
|
||||||
|
"sway/workspaces",
|
||||||
|
"custom/arrowworkspaces",
|
||||||
|
"sway/window"
|
||||||
|
],
|
||||||
|
|
||||||
|
"modules-right": [
|
||||||
|
"custom/arrowtray",
|
||||||
|
"tray",
|
||||||
|
"custom/arrowpackages",
|
||||||
|
"custom/packages",
|
||||||
|
"custom/arrowcpu",
|
||||||
|
"cpu",
|
||||||
|
"custom/arrowmemory",
|
||||||
|
"memory",
|
||||||
|
"custom/arrownetwork",
|
||||||
|
"network",
|
||||||
|
"custom/arrowpulseaudio",
|
||||||
|
"pulseaudio",
|
||||||
|
"custom/arrowdate",
|
||||||
|
"clock#date",
|
||||||
|
"custom/arrowtime",
|
||||||
|
"clock#time",
|
||||||
|
],
|
||||||
|
|
||||||
|
"sway/mode": {
|
||||||
|
"format": "<span style=\"italic\"> {}</span>", // Icon: expand-arrows-alt
|
||||||
|
"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": "{}",
|
||||||
|
|
@ -18,18 +51,33 @@
|
||||||
"icon-size": 20,
|
"icon-size": 20,
|
||||||
"spacing": 10,
|
"spacing": 10,
|
||||||
},
|
},
|
||||||
"clock": {
|
"clock#date": {
|
||||||
"format": "{:%a %d-%b-%Y %R}",
|
"interval": 60,
|
||||||
|
"format": "{:%a %e.%b.%Y}",
|
||||||
|
"tooltip": false,
|
||||||
|
},
|
||||||
|
"clock#time": {
|
||||||
|
"interval": 10,
|
||||||
|
"format": "{:%R}",
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
},
|
},
|
||||||
"cpu": {
|
"cpu": {
|
||||||
"interval": 5,
|
"interval": 5,
|
||||||
"format": "<big></big> {usage}%",
|
"format": "<big></big> {usage}%",
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
|
"states": {
|
||||||
|
"warning": 70,
|
||||||
|
"critical": 90
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"memory": {
|
"memory": {
|
||||||
|
"interval": 5,
|
||||||
"format": "<big></big> {}%",
|
"format": "<big></big> {}%",
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
|
"states": {
|
||||||
|
"warning": 70,
|
||||||
|
"critical": 90
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"network": {
|
"network": {
|
||||||
"format-wifi": " {essid}",
|
"format-wifi": " {essid}",
|
||||||
|
|
@ -37,7 +85,7 @@
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
},
|
},
|
||||||
"pulseaudio": {
|
"pulseaudio": {
|
||||||
"format": "{volume}% {icon} {format_source}",
|
"format": "{volume}% <big>{icon}</big> {format_source}",
|
||||||
"format-source": "{volume}%",
|
"format-source": "{volume}%",
|
||||||
"format-muted": " {format-source}",
|
"format-muted": " {format-source}",
|
||||||
"format-icons": {
|
"format-icons": {
|
||||||
|
|
@ -50,5 +98,52 @@
|
||||||
},
|
},
|
||||||
"tooltip": false,
|
"tooltip": false,
|
||||||
},
|
},
|
||||||
|
"custom/packages": {
|
||||||
|
"format": "<big></big> {}",
|
||||||
|
"interval": 3600,
|
||||||
|
"exec": "checkupdates | wc -l",
|
||||||
|
"exec-if": "exit 0",
|
||||||
|
"signal": 8,
|
||||||
|
"states": {
|
||||||
|
"warning": 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"custom/arrowtime": {
|
||||||
|
"format": "",
|
||||||
|
"tooltip": false
|
||||||
|
},
|
||||||
|
"custom/arrowdate": {
|
||||||
|
"format": "",
|
||||||
|
"tooltip": false
|
||||||
|
},
|
||||||
|
"custom/arrowpulseaudio": {
|
||||||
|
"format": "",
|
||||||
|
"tooltip": false
|
||||||
|
},
|
||||||
|
"custom/arrownetwork": {
|
||||||
|
"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
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
257
.config/waybar/style.css
Normal file
257
.config/waybar/style.css
Normal file
|
|
@ -0,0 +1,257 @@
|
||||||
|
/*
|
||||||
|
* Ref.: https://git.sr.ht/~begs/dotfiles/tree/1c92a56187a56c8531f04dea17c5f96acd9e49c4/item/.config/waybar/style.css
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
*
|
||||||
|
* Waybar configuration
|
||||||
|
*
|
||||||
|
* Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
|
||||||
|
*
|
||||||
|
* =========================================================================== */
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
* Keyframes
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
@keyframes blink-warning {
|
||||||
|
70% {
|
||||||
|
color: @light;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
color: @light;
|
||||||
|
background-color: @warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-critical {
|
||||||
|
70% {
|
||||||
|
color: @light;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
color: @light;
|
||||||
|
background-color: @critical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
* Styles
|
||||||
|
* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* 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 network #4c566a;
|
||||||
|
@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 network #b16286;
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The whole bar */
|
||||||
|
#waybar {
|
||||||
|
/*background: transparent;*/
|
||||||
|
color: @light;
|
||||||
|
font-family: Iosevka, Terminus, Siji;
|
||||||
|
font-size: 10pt;
|
||||||
|
/*font-weight: bold;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each module */
|
||||||
|
#battery,
|
||||||
|
#clock,
|
||||||
|
#cpu,
|
||||||
|
#memory,
|
||||||
|
#mode,
|
||||||
|
#network,
|
||||||
|
#pulseaudio,
|
||||||
|
#tray,
|
||||||
|
#custom-packages {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each module that should blink */
|
||||||
|
#mode,
|
||||||
|
#memory {
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each critical module */
|
||||||
|
#memory.critical,
|
||||||
|
#cpu.critical {
|
||||||
|
color: @critical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each critical that should blink */
|
||||||
|
#mode,
|
||||||
|
#memory.critical {
|
||||||
|
animation-name: blink-critical;
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Each warning */
|
||||||
|
#network.disconnected,
|
||||||
|
#memory.warning,
|
||||||
|
#cpu.warning,
|
||||||
|
#custom-packages.warning {
|
||||||
|
color: @warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* And now modules themselves in their respective order */
|
||||||
|
|
||||||
|
#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 {
|
||||||
|
margin-right: 40px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pulseaudio {
|
||||||
|
background: @sound;
|
||||||
|
color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network {
|
||||||
|
background: @network;
|
||||||
|
color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#memory {
|
||||||
|
background: @memory;
|
||||||
|
color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpu {
|
||||||
|
background: @cpu;
|
||||||
|
color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tray {
|
||||||
|
background: @tray;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock.date {
|
||||||
|
background: @date;
|
||||||
|
color: @light;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock.time {
|
||||||
|
background: @time;
|
||||||
|
color: @dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
#custom-packages {
|
||||||
|
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-arrownetwork {
|
||||||
|
font-size: 24px;
|
||||||
|
color: @network;
|
||||||
|
background: @memory;
|
||||||
|
}
|
||||||
|
|
||||||
|
#custom-arrowpulseaudio {
|
||||||
|
font-size: 24px;
|
||||||
|
color: @sound;
|
||||||
|
background: @network;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Add table
Reference in a new issue