weirdcat/dotfiles
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: waybar style and config cleaned up

Browse Source
This commit is contained in:
Николай
2025-12-24 12:03:06 +03:00
parent 9faceb2309
commit bf659ad824
2 changed files with 165 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
waybar/config_top.jsonc
View File

@@ -1,17 +1,13 @@
// -*- mode: jsonc -*- // -*- mode: jsonc -*-
{ {
//"output": "eDP-1",
"output": [ "output": [
"eDP-1", "eDP-1",
"HDMI-A-1" "HDMI-A-1"
], ],
// "layer": "top", // Waybar at top layer "height": 30,
// "position": "bottom", // Waybar position (top|bottom|left|right) "width": 1900,
"height": 30, // Waybar height (to be removed for auto height) "spacing": 0,
"width": 1900, // Waybar width
"spacing": 0, // Gaps between modules (4px)
"reload_style_on_change": true, "reload_style_on_change": true,
// Choose the order of the modules
"modules-left": [ "modules-left": [
"custom/separator_invisible", "custom/separator_invisible",
"mpd", "mpd",
@@ -28,28 +24,15 @@
"clock", "clock",
"custom/separator_invisible" "custom/separator_invisible"
], ],
// Modules configuration
"hyprland/workspaces": { "hyprland/workspaces": {
"disable-scroll": true, "disable-scroll": true,
"all-outputs": false, "all-outputs": false,
"active-only": true, "active-only": true,
"warp-on-scroll": false, "warp-on-scroll": false,
"persistent-workspaces": { "persistent-workspaces": {
// "1": [],
// "2": [],
// "3": [],
// "4": [],
// "5": [],
// "6": [],
// "7": [],
// "8": [],
// "9": [],
// "10": [],
// "11": [],
// "12": []
"eDP-1": [1,2,3,4,5,6,7,8,9], "eDP-1": [1,2,3,4,5,6,7,8,9],
"HDMI-A-1": [10,11,12], "HDMI-A-1": [10,11,12],
"FUCKOFF": [13,14] "IGNORED": [13,14]
}, },
"ignore-workspaces": [ "ignore-workspaces": [
"*13", "*13",
@@ -69,14 +52,13 @@
"10": "󰥱", "10": "󰥱",
"11": "", "11": "",
"12": "", "12": "",
"default": "󰽢", "default": "󰽢"
"empty": "󰄰"
} }
}, },
"mpd": { "mpd": {
"password": "kapuchinamusica", "password": "kapuchinamusica",
"artist-len": 30, "artist-len": 30,
"title-len": 30, "title-len": 31,
"unknown-tag": "n/a", "unknown-tag": "n/a",
"format": "{stateIcon} {titleSmart}", "format": "{stateIcon} {titleSmart}",
"interval": 1, "interval": 1,
@@ -92,16 +74,8 @@
"format-stopped": "", "format-stopped": "",
"on-click": "mpc toggle --password kapuchinamusica" "on-click": "mpc toggle --password kapuchinamusica"
}, },
"tray": {
// "icon-size": 21,
"spacing": 10,
"icons": {
"blueman": "bluetooth",
"*": "folder-symbolic"
}
},
"clock": { "clock": {
// "timezone": "America/New_York", "timezone": "Europe/Moscow",
"interval": 5, "interval": 5,
"tooltip-format": "<big>{:%A ( %B %d )}</big>\n<tt><small>{calendar}</small></tt>", "tooltip-format": "<big>{:%A ( %B %d )}</big>\n<tt><small>{calendar}</small></tt>",
"format": "{:%H:%M}", "format": "{:%H:%M}",
@@ -122,18 +96,6 @@
"on-click-right": "mode" "on-click-right": "mode"
} }
}, },
"cpu": {
"format": "󰓅 {usage}%",
"tooltip": false,
"interval": 15,
"format-icons": [
"󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
]
},
"memory": {
"format": "󰧑 {percentage}% 󰋊 {swapPercentage}%",
"interval": 10
},
"battery": { "battery": {
"full-at": 98, "full-at": 98,
"states": { "states": {
@@ -147,7 +109,7 @@
"format-plugged": "{icon}", "format-plugged": "{icon}",
"format-alt": "{time} {icon}", "format-alt": "{time} {icon}",
// "format-good": "", // An empty format will hide the module // "format-good": "", // An empty format will hide the module
"format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""], "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂"],
"tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}" "tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}"
}, },
"network": { "network": {
@@ -175,46 +137,16 @@
"max": 100, "max": 100,
"orientation": "horizontal" "orientation": "horizontal"
}, },
"custom/logo": {
"format": "",
"on-click": "swaync-client -t -sw",
"interval": "once",
"tooltip": false
},
"custom/separator": {
"format": "",
"interval": "once",
"tooltip": false
},
"custom/separator_invisible": { "custom/separator_invisible": {
"format": " ", "format": " ",
"interval": "once", "interval": "once",
"tooltip": false "tooltip": false
}, },
"custom/submap": {
"format": " {icon} {text}",
"max-length": 10,
"format-icons": {
"default": "󰥻"
},
"interval": 2,
"exec": "state=$(hyprctl submap) && [[ $state != 'default' ]] && echo $state",
"on-click": "hyprctl dispatch submap reset"
},
"custom/pomodoro": { "custom/pomodoro": {
"format": "{}", "format": "{}",
"return-type": "json", "return-type": "json",
"exec": "~/.local/bin/waybar-module-pomodoro --persist -w 20 -s 5 -l 20 -i 3 -p '' -a '' --autob", "exec": "~/.local/bin/waybar-module-pomodoro --persist -w 20 -s 5 -l 20 -i 3 -p '' -a '' --autob",
"on-click": "~/.local/bin/waybar-module-pomodoro toggle", "on-click": "~/.local/bin/waybar-module-pomodoro toggle",
"on-click-right": "~/.local/bin/waybar-module-pomodoro reset" "on-click-right": "~/.local/bin/waybar-module-pomodoro reset"
},
"custom/panel": {
"format": "",
"on-click": "swaync-client -t -sw"
},
"custom/goal": {
"exec": "cat $HOME/.config/waybar/goal.txt",
"format": "󱓧 {}",
"interval": 60
} }
} }

364
waybar/style_top.css
View File

@@ -1,306 +1,256 @@
/* Colors Definitions */ /* --------------------------------------------------------------------------
IMPORTS & GLOBAL STYLES
-------------------------------------------------------------------------- */
@import "colors.css"; @import "colors.css";
/* Window */ /* --------------------------------------------------------------------------
BASE CONTAINER
-------------------------------------------------------------------------- */
window#waybar { window#waybar {
font-family: "Iosevka Nerd Font Propo"; /* Layout & Box Model */
font-size: 15px; border: 1px solid @border-color;
background-color: @bg-panel; border-top: none;
color: @text-primary; border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
border: 1px solid @border-color; /* Typography */
border-top: none; font-family: "Iosevka Nerd Font Propo";
transition-property: background-color; font-size: 15px;
transition-duration: 0.5s;
/* Colors */
background-color: @bg-panel;
color: @text-primary;
/* Effects & Transitions */
transition-property: background-color;
transition-duration: 0.5s;
} }
/* Window States */
window#waybar.hidden { window#waybar.hidden {
opacity: 0.2; opacity: 0.2;
} }
window#waybar.termite { window#waybar.termite {
background-color: #3F3F3F; background-color: #3F3F3F;
} }
window#waybar.chromium { window#waybar.chromium {
background-color: #000000; background-color: #000000;
border: none; border: none;
} }
/* Common module styling - applied to most modules */ /* --------------------------------------------------------------------------
MODULE COMMON STYLES
-------------------------------------------------------------------------- */
/* Common styling applied to all modules */
#mpd, #mpd,
#custom-pomodoro, #custom-pomodoro,
#custom-goal,
#custom-submap,
#cpu,
#memory,
#disk,
#clock, #clock,
#battery, #battery,
#temperature,
#backlight,
#network, #network,
#pulseaudio, #pulseaudio,
#pulseaudio-slider, #pulseaudio-slider,
#wireplumber,
#custom-logo,
#custom-media,
#custom-panel,
#custom-separator, #custom-separator,
#tray,
#mode,
#idle_inhibitor,
#scratchpad { #scratchpad {
padding: 0 10px; padding: 0 10px;
color: @text-primary; color: @text-primary;
transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
} }
/* Workspaces */ /* --------------------------------------------------------------------------
WORKSPACES
-------------------------------------------------------------------------- */
#workspaces { #workspaces {
font-size: 18px; font-size: 18px;
background-color: transparent; background-color: transparent;
} }
#workspaces button { #workspaces button {
padding: 0 6px; padding: 0 6px;
min-width: 20px; min-width: 20px;
background-color: transparent; background-color: transparent;
color: alpha(@accent-color,.5); color: alpha(@accent-color, 0.5);
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
/* Workspace States */
#workspaces button.empty { #workspaces button.empty {
color: @text-secondary; color: @text-secondary;
} }
#workspaces button.active.hosting-monitor { #workspaces button.active.hosting-monitor {
/* background-color: rgba(0, 0, 0, 0.32); */ color: @accent-color;
/* box-shadow: inset 0 -3px @accent-color; */ text-shadow: 0px 0px 8px @accent-color;
color: @accent-color; animation: hover 0.8s 1;
text-shadow: 0px 0px 8px @accent-color;
animation: hover 0.8s 1;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: @bg-opaque; color: @attention;
font-weight: 700; font-weight: 700;
color: @attention; text-shadow: 0px 0px 8px @attention;
text-shadow: 0px 0px 8px @attention; transition: color 0.5s, box-shadow 0.5s, background 0.5s;
transition: color 0.5s, box-shadow 0.5s, background 0.5s;
} }
#workspaces button:hover { #workspaces button:hover {
color: @foreground; color: @foreground;
background-color: transparent; background-color: transparent;
text-shadow: 0px 0px 2px rgba(233, 99, 117, 1); text-shadow: 0px 0px 2px rgba(233, 99, 117, 1);
} }
/* Side Module Groups */ /* --------------------------------------------------------------------------
SIDE PANEL GROUPS
-------------------------------------------------------------------------- */
.modules-left { .modules-left {
border-left: none; border-left: none;
border-radius: 0 0 10px 0; border-radius: 0 0 10px 0;
} }
.modules-right { .modules-right {
border-right: none; border-right: none;
border-radius: 0 0 0 10px; border-radius: 0 0 0 10px;
}
/* System Modules - specific border adjustments */
#cpu,
#memory,
#memory.swap {
margin: 0;
}
#cpu {
border-right: none;
border-radius: 0 0 0 10px;
}
#memory {
border-left: none;
}
/* Custom Modules */
#custom-pomodoro {
color: @text-secondary;
}
#custom-pomodoro {
border-radius: 0 0 10px 10px;
}
#custom-goal {
margin: 0;
border-left: none;
border-radius: 0 0 10px 0;
}
#custom-submap {
color: @text-primary;
}
/* Pomodoro States */
#custom-pomodoro.work {
color: @accent-color;
}
#custom-pomodoro.break {
color: @success;
text-shadow: 0px 0px 4px rgba(0, 255, 0, 1);
}
#custom-pomodoro.pause {
color: @attention;
text-shadow: 0px 0px 4px @attention;
}
#custom-pomodoro.break + #custom-goal,
#custom-pomodoro.pause + #custom-goal {
color: inherit;
box-shadow: inherit;
}
/* System Info Modules */
#cpu,
#memory,
#memory.swap,
#disk {
color: @text-primary;
} }
/* --------------------------------------------------------------------------
AUDIO CONTROL MODULES
-------------------------------------------------------------------------- */
#pulseaudio { #pulseaudio {
padding-right: 0; padding-right: 0;
border-right: none;
} }
#pulseaudio-slider slider { #pulseaudio-slider slider {
min-height: 0px; min-height: 0px;
min-width: 0px; min-width: 0px;
opacity: 0; opacity: 0;
background-image: none; background-image: none;
border: none; border: none;
box-shadow: none; box-shadow: none;
} }
#pulseaudio-slider trough { #pulseaudio-slider trough {
min-height: 10px; min-height: 10px;
min-width: 25px; min-width: 25px;
border-radius: 5px; border-radius: 5px;
background: alpha(@text-primary,.2); background: alpha(@text-primary, 0.2);
} }
#pulseaudio-slider highlight { #pulseaudio-slider highlight {
min-width: 10px; min-width: 10px;
border-radius: 5px; border-radius: 5px;
background: @text-primary; background: @text-primary;
} }
#pulseaudio { /* --------------------------------------------------------------------------
border-right: none; CUSTOM MODULES
-------------------------------------------------------------------------- */
#custom-pomodoro {
color: @text-secondary;
border-radius: 0 0 10px 10px;
} }
/* MPD specific styles */ /* --------------------------------------------------------------------------
STATE-BASED STYLES
-------------------------------------------------------------------------- */
/* POMODORO STATES */
#custom-pomodoro.work {
color: @accent-color;
}
#custom-pomodoro.break {
color: @success;
text-shadow: 0px 0px 4px rgba(0, 255, 0, 1);
}
#custom-pomodoro.pause {
color: @attention;
text-shadow: 0px 0px 4px @attention;
}
/* MPD STATES */
#mpd { #mpd {
font-weight: 700; font-weight: 700;
transition: color 2s, background 2s; transition: color 2s, background 2s;
} }
#mpd.playing { #mpd.playing {
color: @accent-color; color: @accent-color;
} }
#mpd.stopped { #mpd.stopped {
/* color: rgba(255,255,255,0.5); */ color: transparent;
color: transparent; background: transparent;
background: transparent;
} }
#mpd.paused { #mpd.paused {
font-weight: normal; font-weight: normal;
color: @text-secondary; color: @text-secondary;
} }
/* Hover Effects */ /* BATTERY STATES */
#battery.charging,
#battery.plugged {
color: @success;
text-shadow: 0px 0px 8px @success;
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
}
#battery.warning:not(.charging) {
color: @warning;
text-shadow: 0px 0px 8px @warning;
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
}
#battery.critical:not(.charging) {
color: @danger;
text-shadow: 0px 0px 8px @danger;
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
}
/* --------------------------------------------------------------------------
HOVER EFFECTS
-------------------------------------------------------------------------- */
#mpd.playing:hover, #mpd.playing:hover,
#mpd.paused:hover, #mpd.paused:hover,
#clock:hover, #clock:hover,
#battery:hover, #battery:hover,
#disk:hover,
#temperature:hover,
#backlight:hover,
#network:hover, #network:hover,
#pulseaudio:hover, #pulseaudio:hover,
#cpu:hover,
#memory:hover,
#wireplumber:hover,
#custom-logo:hover,
#custom-pomodoro:hover, #custom-pomodoro:hover,
#custom-media:hover,
#custom-panel:hover,
#mode:hover,
#idle_inhibitor:hover,
#scratchpad:hover, #scratchpad:hover,
#power-profiles-daemon:hover { #power-profiles-daemon:hover {
color: @accent-color; color: @accent-color;
text-shadow: 0px 0px 8px @accent-color; text-shadow: 0px 0px 8px @accent-color;
transition: color 0.3s, box-shadow 0.3s, background 0.3s; transition: color 0.3s, box-shadow 0.3s, background 0.3s;
} }
#pulseaudio-slider:hover highlight { #pulseaudio-slider:hover highlight {
background: @accent-color; background: @accent-color;
box-shadow: 0px 0px 8px @accent-color; box-shadow: 0px 0px 8px @accent-color;
transition: color 0.3s, box-shadow 0.3s, background 0.3s; transition: color 0.3s, box-shadow 0.3s, background 0.3s;
} }
/* Battery States */ /* --------------------------------------------------------------------------
#battery.charging, LAYOUT UTILITIES
#battery.plugged { -------------------------------------------------------------------------- */
color: @success; #window,
text-shadow: 0px 0px 8px @success; #workspaces {
transition: color 0.3s, box-shadow 0.3s, background 0.3s; margin: 0 0px;
} }
#battery.warning:not(.charging) { .modules-left > widget:first-child > #workspaces {
color: @warning; margin-left: 0;
text-shadow: 0px 0px 8px @warning;
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
} }
#battery.critical:not(.charging) { .modules-right > widget:last-child > #workspaces {
color: @danger; margin-right: 0;
text-shadow: 0px 0px 8px @danger;
transition: color 0.3s, box-shadow 0.3s, background 0.3s;
} }
/* Tray */ /* --------------------------------------------------------------------------
#tray > .needs-attention { ANIMATIONS
-gtk-icon-effect: highlight; -------------------------------------------------------------------------- */
animation: blink-attention 2s infinite;
}
/* Animations */
@keyframes hover { @keyframes hover {
0% { color: @text-primary; } 0% { color: @text-primary; }
100% { color: @accent-color; } 100% { color: @accent-color; }
} }
/* Layout Utilities */
#window,
#workspaces {
margin: 0 0px;
}
.modules-left > widget:first-child > #workspaces {
margin-left: 0;
}
.modules-right > widget:last-child > #workspaces {
margin-right: 0;
}
#mode {
box-shadow: inset 0 -3px @text-primary;
}