From 3832e2c085e5137f78cdf5f0c1e9cf273ffbc338 Mon Sep 17 00:00:00 2001 From: Jacob Janzen Date: Wed, 7 Aug 2024 22:34:10 -0500 Subject: complete my configuration migration --- config/waybar/config.org | 46 +++++++++++++++--------------- config/waybar/index.org | 9 ++++++ config/waybar/style.org | 74 ++++++++++++++++++------------------------------ 3 files changed, 60 insertions(+), 69 deletions(-) create mode 100644 config/waybar/index.org (limited to 'config/waybar') diff --git a/config/waybar/config.org b/config/waybar/config.org index a23d887..ebbbc81 100644 --- a/config/waybar/config.org +++ b/config/waybar/config.org @@ -1,18 +1,18 @@ #+title: Waybar Configuration * Layout -Define the layout of the bar. -#+begin_src js-json :tangle config - { - "height": 30, - "spacing": 4, - "modules-left": ["sway/workspaces", "sway/scratchpad"], - "modules-center": ["sway/window"], - "modules-right": ["mpd", "pulseaudio", "network", "cpu", "memory", "clock", "tray"], +Define the layout of the bar with workspaces and scratchpad on the left, the current window in the middle, and music player daemon, sound, network, CPU usage, memory usage, clock, and system tray on the right. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes + { + "height": 30, + "spacing": 4, + "modules-left": ["sway/workspaces", "sway/scratchpad"], + "modules-center": ["sway/window"], + "modules-right": ["mpd", "pulseaudio", "network", "cpu", "memory", "clock", "tray"], #+end_src * Components -Define scratchpad component. -#+begin_src js-json :tangle config +Define scratchpad component. To show an icon and the count of items in it. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "sway/scratchpad": { "format": "{icon} {count}", "show-empty": false, @@ -22,8 +22,8 @@ Define scratchpad component. }, #+end_src -Define music player daemon component. -#+begin_src js-json :tangle config +Define music player daemon component to list the current song, album, artist, and position in the song with an icon representing the status. Clicking it opens a TUI interface to the daemon. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "mpd": { "format": "{stateIcon} {artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) [{songPosition}|{queueLength}] 🎵", "format-disconnected": "Disconnected 🎵", @@ -41,7 +41,7 @@ Define music player daemon component. #+end_src Define tray component. -#+begin_src js-json :tangle config +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "tray": { "icon-size": 21, "spacing": 10, @@ -49,31 +49,31 @@ Define tray component. }, #+end_src -Define clock component. -#+begin_src js-json :tangle config +Define clock component to show the current time and a calendar in a tooltip. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "clock": { "format": "{:%H:%M\t%Y-%m-%d}", "tooltip-format": "{:%Y %B}\n{calendar}" }, #+end_src -Define CPU usage component. -#+begin_src js-json :tangle config +Define CPU usage component to show usage in percent with an icon. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "cpu": { "format": "{usage}% ", "tooltip": false }, #+end_src -Define memory usage component. -#+begin_src js-json :tangle config +Define memory usage component to show usage in percent with an icon. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "memory": { "format": "{}% " }, #+end_src -Define network component. -#+begin_src js-json :tangle config +Define network component to show a Wi-Fi icon if connected and a warning signal if not. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "network": { // "interface": "wlp2*", // (Optional) To force the use of this interface "format-wifi": "", @@ -85,8 +85,8 @@ Define network component. }, #+end_src -Define audio component. -#+begin_src js-json :tangle config +Define audio component to show the volume level and whether or not it is muted with an icon. Clicking it opens a GUI sound menu. +#+begin_src js-json :tangle ~/.config/waybar/config :mkdirp yes "pulseaudio": { // "scroll-step": 1, // %, can be a float "format": "{volume}% {icon}", diff --git a/config/waybar/index.org b/config/waybar/index.org new file mode 100644 index 0000000..b147916 --- /dev/null +++ b/config/waybar/index.org @@ -0,0 +1,9 @@ +#+title: Dotfiles =/.config/waybar= +This is where my Waybar configuration is located. + +* Directories +- [[../index.org][../]] + +* Files +- [[./config.org][config]] +- [[./style.org][style.css]] diff --git a/config/waybar/style.org b/config/waybar/style.org index 193b465..3f2ae62 100644 --- a/config/waybar/style.org +++ b/config/waybar/style.org @@ -1,7 +1,6 @@ #+title: Waybar Styling -* Global -Set global font, colours, and transitions. -#+begin_src css :tangle yes +Set global font, colours, and transitions to have a transparent background. The text is white with a small shadow. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes window#waybar { font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; @@ -13,26 +12,24 @@ Set global font, colours, and transitions. } #+end_src -* Button -Set global button styling. -#+begin_src css :tangle yes +Remove the border from buttons and make them square. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes button { - box-shadow: inset 0 -3px transparent; border: none; border-radius: 0; } #+end_src -Set button hover styling -#+begin_src css :tangle yes +Hovering over a button should inherit the background colour and add a white border to the bottom. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes button:hover { background: inherit; box-shadow: inset 0 -3px #ffffff; } #+end_src -Set workspace button styling. -#+begin_src css :tangle yes +Workspace buttons should have white with a small shadow, a little bit of extra horizontal padding, and a transparent background. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #workspaces button { padding: 0 5px; text-shadow: 1px 1px #64727D; @@ -41,40 +38,30 @@ Set workspace button styling. } #+end_src -Set button hover styling in workspaces. -#+begin_src css :tangle yes +Hovering over a workspace button should darken it. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #workspaces button:hover { background: rgba(0, 0, 0, 0.2); } #+end_src -Set button focused styling in workspaces. -#+begin_src css :tangle yes +The focused workspace should have a white bottom border. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #workspaces button.focused { background: transparent; - text-shadow: 1px 1px #64727D; box-shadow: inset 0 -3px #ffffff; } #+end_src -Set button urgent styling in workspaces. -#+begin_src css :tangle yes +Urgent workspaces should be red. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #workspaces button.urgent { background-color: #eb4d4b; } #+end_src -* Modes -Set global mode styling. -#+begin_src css :tangle yes - #mode { - background-color: #64727D; - border-bottom: 3px solid #ffffff; - } -#+end_src - -Set typical mode styling. -#+begin_src css :tangle yes +Add extra horizontal padding where needed. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #clock, #cpu, #memory, @@ -88,20 +75,19 @@ Set typical mode styling. #scratchpad, #mpd { padding: 0 10px; - color: #ffffff; } #+end_src -Add margins for workspaces and windows. -#+begin_src css :tangle yes +Add extra horizontal margins where needed. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #window, #workspaces { margin: 0 4px; } #+end_src -Omit margins on leftmost and rightmost workspaces. -#+begin_src css :tangle yes +Omit margins on the leftmost and rightmost workspaces. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes .modules-left > widget:first-child > #workspaces { margin-left: 0; } @@ -112,31 +98,27 @@ Omit margins on leftmost and rightmost workspaces. } #+end_src -Set focus styling. -#+begin_src css :tangle yes - label:focus { - background-color: #000000; - } -#+end_src - -Set important mode styling. -#+begin_src css :tangle yes +Passive system tray icons are dimmed. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #tray > .passive { -gtk-icon-effect: dim; } +#+end_src +Tray icons that need attention are highlighted. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #tray > .needs-attention { -gtk-icon-effect: highlight; } #+end_src -Set scratchpad styling. -#+begin_src css :tangle yes +The scratchpad should be darkened and transparent when empty. +#+begin_src css :tangle ~/.config/waybar/style.css :mkdirp yes #scratchpad { background: rgba(0, 0, 0, 0.2); } #scratchpad.empty { - background-color: transparent; + background-color: transparent; } #+end_src -- cgit v1.2.3