waybar css code clean

This commit is contained in:
nomadics9 2024-10-26 20:21:56 +03:00
parent f1ce73ae15
commit 24b3d6c9ce
2 changed files with 141 additions and 395 deletions

View file

@ -58,8 +58,10 @@ in
general = { general = {
gaps_in = 5; gaps_in = 5;
gaps_out = 5; gaps_out = 5;
border_size = 1; border_size = 2;
"col.active_border" = "rgba(02BEF5ee) rgba(02BEF5ee) 45deg"; #"col.active_border" = "rgba(02BEF5ee) rgba(02BEF5ee) 45deg";
# "col.active_border" = "rgba(0dcaf5ee) rgba(0dcaf5ee) 45deg";
"col.active_border" = "rgba(5faaffee) rgba(5faaffee) 45deg";
"col.inactive_border" = "rgba(595959aa)"; "col.inactive_border" = "rgba(595959aa)";
layout = "dwindle"; layout = "dwindle";
}; };

View file

@ -19,14 +19,14 @@ in
layer = "top"; layer = "top";
modules-left = [ "custom/launcher" "custom/wg" "cpu" "memory" "custom/weather" "hyprland/workspaces" ]; modules-left = [ "custom/launcher" "custom/wg" "cpu" "memory" "custom/weather" "hyprland/workspaces" ];
modules-center = [ "mpris" ]; modules-center = [ "mpris" ];
modules-right = [ "network" "pulseaudio" "backlight" "battery" "clock" "tray" "hyprland/language" "custom/wallpaper" "idle_inhibitor" "custom/refresh-rate" ]; modules-right = [ "network" "pulseaudio" "backlight" "battery" "tray" "hyprland/language" "custom/wallpaper" "idle_inhibitor" "custom/refresh-rate" "clock" ];
"hyprland/workspaces" = { "hyprland/workspaces" = {
format = "{name}"; format = "{name}";
all-outputs = true; all-outputs = true;
on-click = "activate"; on-click = "activate";
format-icons = { format-icons = {
active = " 󱎴"; active = "󱎴";
default = "󰍹"; default = "󰍹";
}; };
persistent-workspaces = { persistent-workspaces = {
@ -41,17 +41,15 @@ in
"9" = [ ]; "9" = [ ];
}; };
}; };
"hyprland/language" = { "hyprland/language" = {
format = "{short}"; format = "{short}";
}; };
"hyprland/window" = {
max-length = 200;
separate-outputs = true;
};
"tray" = { "tray" = {
spacing = 10; spacing = 10;
}; };
"clock" = { "clock" = {
format = "{:%H:%M}"; format = "{:%H:%M}";
format-alt = "{:%b %d %Y}"; format-alt = "{:%b %d %Y}";
@ -60,21 +58,17 @@ in
"cpu" = { "cpu" = {
interval = 10; interval = 10;
format = " {}%"; format = "🤖 {}%";
max-length = 10; max-length = 10;
on-click = "";
}; };
"memory" = { "memory" = {
interval = 30; interval = 30;
format = "🧠 {}%"; format = "🧠 {}%";
format-alt = "🧠 {used:0.1f}GB"; format-alt = "🧠 {used:0.1f}GB";
max-length = 10; max-length = 10;
}; };
"temperature" = {
interval = 10;
format = " {temperatureC}°C";
max-length = 10;
};
"backlight" = { "backlight" = {
device = "intel_backlight"; device = "intel_backlight";
format = "{icon}"; format = "{icon}";
@ -86,6 +80,7 @@ in
smooth-scrolling-threshold = "2400"; smooth-scrolling-threshold = "2400";
tooltip-format = "Brightness {percent}%"; tooltip-format = "Brightness {percent}%";
}; };
"network" = { "network" = {
format-wifi = "<small>{bandwidthDownBytes}</small> {icon}"; format-wifi = "<small>{bandwidthDownBytes}</small> {icon}";
min-length = 10; min-length = 10;
@ -105,17 +100,6 @@ in
on-click = "~/.config/hypr/scripts/wg-toggle.sh"; on-click = "~/.config/hypr/scripts/wg-toggle.sh";
}; };
"bluetooth" = {
format = "{icon}";
format-alt = "bluetooth: {status}";
interval = 30;
format-icons = {
enabled = "";
disabled = "󰂲";
};
tooltip-format = "{status}";
};
"pulseaudio" = { "pulseaudio" = {
format = "{icon}"; format = "{icon}";
format-muted = "󰖁"; format-muted = "󰖁";
@ -134,8 +118,8 @@ in
adapter = "ADP0"; adapter = "ADP0";
interval = 60; interval = 60;
states = { states = {
warning = 20; warning = 15;
critical = 15; critical = 7;
}; };
max-length = 20; max-length = 20;
format = "{icon}"; format = "{icon}";
@ -145,8 +129,9 @@ in
format-plugged = "󰚥"; format-plugged = "󰚥";
format-notcharging = "󰚥"; format-notcharging = "󰚥";
format-full = "󰂄"; format-full = "󰂄";
format-alt = "<small>{capacity}%</small>";
format-alt = "<small>{capacity}%</small> "; format-alt-warning = "<small>{capacity}%</small>";
format-critical-alt = "<small>{capacity}%</small>";
format-icons = [ "󱊡" "󱊢" "󱊣" ]; format-icons = [ "󱊡" "󱊢" "󱊣" ];
}; };
@ -199,11 +184,13 @@ in
}; };
}; };
}; };
style = '' style = ''
* { * {
/* `otf-font-awesome` is required to be installed for icons */ font-family: JetBrains Mono, JetBrainsMono Nerd Font, Material Design Icons;
font-family: Material Design Icons, JetBrainsMono Nerd Font, Iosevka Nerd Font ; font-size: 17px;
font-size: 14px;
border: none; border: none;
border-radius: 0; border-radius: 0;
min-height: 0; min-height: 0;
@ -216,358 +203,114 @@ in
transition-duration: 0.5s; transition-duration: 0.5s;
} }
window#waybar.hidden { /* General styling for individual modules */
opacity: 0.1;
}
#window {
color: #64727d;
}
#clock, #clock,
#temperature, #temperature,
#mpris, #mpris,
#cpu, #cpu,
#memory, #memory,
#custom-media,
#tray, #tray,
#mode,
#custom-lock,
#workspaces, #workspaces,
#custom-launcher, #custom-launcher,
#custom-spotify,
#custom-weather, #custom-weather,
#custom-wg, #custom-wg {
#custom-weather.severe,
#custom-weather.sunnyDay,
#custom-weather.clearNight,
#custom-weather.cloudyFoggyDay,
#custom-weather.cloudyFoggyNight,
#custom-weather.rainyDay,
#custom-weather.rainyNight,
#custom-weather.showyIcyDay,
#custom-weather.snowyIcyNight,
#custom-weather.default {
color: #e5e5e5;
border-radius: 6px;
padding: 2px 10px;
background-color: #222034; background-color: #222034;
font-size: 14px;
color: #8a909e;
padding: 3px 8px;
border-radius: 8px; border-radius: 8px;
font-size: 14px; margin: 8px 2px;
margin-left: 4px;
margin-right: 4px;
margin-top: 8.5px;
margin-bottom: 8.5px;
}
#temperature{
color: #7a95c9;
}
#cpu {
color: #fb958b;
} }
#memory { /* Styling for Network, Pulseaudio, Backlight, and Battery group */
color: #a1c999; #network,
}
#workspaces button {
color: #7a95c9;
box-shadow: inset 0 -3px transparent;
padding-right: 3px;
padding-left: 4px;
margin-left: 0.1em;
margin-right: 0em;
transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68);
}
#workspaces button.active {
color: #ecd3a0;
padding-left: 1px;
padding-right: 5px;
font-family: Iosevka Nerd Font;
font-weight: bold;
font-size: 12px;
margin-left: 0em;
margin-right: 0em;
transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68);
}
/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
margin-left: 0;
}
/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
margin-right: 0;
}
#custom-launcher {
margin-left: 12px;
padding-right: 18px;
padding-left: 14px;
font-size: 22px;
color: #7a95c9;
margin-top: 8.5px;
margin-bottom: 8.5px;
}
#bluetooth,
#backlight,
#battery,
#pulseaudio, #pulseaudio,
#network { #backlight,
#battery {
background-color: #222034; background-color: #222034;
padding: 0em 2em;
font-size: 14px;
padding-left: 7.5px;
padding-right: 7.5px;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 7px;
margin-bottom: 7px;
font-size: 20px; font-size: 20px;
padding: 3px 8px;
margin: 8px 0px;
} }
#pulseaudio { /* Module-specific colors for Network, Pulseaudio, Backlight, Battery */
color: #81A1C1; #network, #pulseaudio { color: #5796E0; }
padding-left: 9px; #backlight { color: #ecd3a0; }
font-size: 22px;
}
#pulseaudio.muted {
color: #fb958b;
padding-left: 9px;
font-size: 22px;
}
#backlight {
color: #ecd3a0;
padding-right: 5px;
padding-left: 8px;
font-size: 21.2px;
}
#network {
padding-left: 0.2em;
color: #5E81AC;
border-radius: 8px 0px 0px 8px;
padding-left: 14px;
padding-right: 14px;
font-size: 20px;
}
#network.disconnected {
color: #fb958b;
}
#bluetooth {
padding-left: 0.2em;
color: #5E81AC;
border-radius: 8px 0px 0px 8px;
padding-left: 14px;
padding-right: 14px;
font-size: 20px;
}
#bluetooth.disconnected {
color: #fb958b;
}
#battery { #battery {
color: #8fbcbb; color: #8fbcbb;
border-radius: 0px 8px 8px 0px; padding-right: 14px
padding-right: 12px;
padding-left: 12px;
font-size: 22px;
} }
#battery.critical, /* Battery state-specific colors */
#battery.warning, #battery.warning { color: #ecd3a0; }
#battery.full, #battery.critical:not(.charging) { color: #fb958b; }
#battery.plugged {
color: #8fbcbb;
padding-left: 12px;
padding-right: 12px;
font-size: 22px;
}
#battery.charging { /* Pulseaudio mute state */
font-size: 18px; #pulseaudio.muted { color: #fb958b; }
padding-right: 12px;
padding-left: 12px;
}
#battery.full,
#battery.plugged {
font-size: 22.5px;
padding-right: 12px;
}
@keyframes blink {
to {
background-color: rgba(30, 34, 42, 0.5);
color: #abb2bf;
}
}
#battery.warning {
color: #ecd3a0;
}
#battery.critical:not(.charging) {
color: #fb958b;
}
#custom-lock {
color: #ecd3a0;
padding: 0 15px 0 15px;
margin-left: 7px;
margin-top: 7px;
margin-bottom: 7px;
}
#clock {
color: #8a909e;
font-family: Iosevka Nerd Font;
font-weight: bold;
margin-top: 7px;
margin-bottom: 7px;
}
/* Styling for Language, Custom Wallpaper, Idle Inhibitor, Custom Refresh Rate group */
#language, #language,
#custom-refresh-rate, #custom-refresh-rate,
#custom-wallpaper, #custom-wallpaper,
#idle_inhibitor { #idle_inhibitor {
background-color: #222034; background-color: #222034;
color: #8a909e; color: #8a909e;
font-family: JetBrains Mono Nerd Font; padding: 3px 4px;
margin: 8px 0px;
}
/* Rounded corners for specific group elements */
#language { border-radius: 8px 0 0 8px; }
#custom-refresh-rate { border-radius: 0 8px 8px 0; }
#network { border-radius: 8px 0 0 8px; }
#battery { border-radius: 0 8px 8px 0; }
/* Temperature, CPU, and Memory colors */
#temperature { color: #5796E0; }
#cpu { color: #fb958b; }
#memory { color: #a1c999; }
/* Workspaces active button styling */
#workspaces button {
color: #5796E0;
border-radius: 8px;
box-shadow: inset 0 -3px transparent;
padding: 3px 4px;
transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68);
}
#workspaces button.active {
color: #ecd3a0;
font-weight: bold; font-weight: bold;
font-size: 17px; border-radius: 8px;
padding: 0 7px; /* Adjust padding here */ transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68);
margin-top: 7px;
margin-bottom: 7px;
padding-top: 3px;
padding-bottom: 3px;
}
#language {
border-radius: 8px 0 0 8px; /* Rounded on the left */
}
#custom-refresh-rate {
border-radius: 0 8px 8px 0; /* Rounded on the right */
margin-right: 12px;
}
#custom-wallpaper,
#idle_inhibitor {
/* No border-radius here to avoid separation */
padding-left: 7px;
padding-right: 7px;
}
/* Remove additional borders/margins that might cause separation */
#idle_inhibitor,
#custom-wallpaper {
margin-left: 0; /* Reset margin */
margin-right: 0; /* Reset margin */
margin-top: 7px; /* Reset margin */
margin-bottom: 7px; /* Reset margin */
}
tooltip {
font-family: Iosevka Nerd Font;
border-radius: 15px;
padding: 15px;
background-color: #1f232b;
}
tooltip label {
font-family: Iosevka Nerd Font;
padding: 5px;
}
label:focus {
background-color: #1f232b;
}
#tray {
margin-right: 8px;
margin-top: 7px;
margin-bottom: 7px;
font-size: 30px;
}
#tray > .passive {
-gtk-icon-effect: dim;
}
#tray > .needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
} }
#idle_inhibitor.activated { #idle_inhibitor.activated {
background-color: #ecf0f1; background-color: #ecf0f1;
color: #2d3436; color: #2d3436;
border-radius: 8px border-radius: 8px;
}
#mpris,
#custom-spotify {
color: #abb2bf;
} }
#custom-weather { /* Custom launcher */
font-family: Iosevka Nerd Font; #custom-launcher {
color: #5796E0;
font-size: 22px;
padding-right: 14px;
}
/* Tooltip styling */
tooltip {
border-radius: 15px;
padding: 15px;
background-color: #222034;
}
tooltip label {
padding: 5px;
font-size: 14px; font-size: 14px;
color: #8a909e;
} }
#custom-weather.severe {
color: #eb937d;
}
#custom-weather.sunnyDay {
color: #c2ca76;
}
#custom-weather.clearNight {
color: #cad3f5;
}
#custom-weather.cloudyFoggyDay,
#custom-weather.cloudyFoggyNight {
color: #c2ddda;
}
#custom-weather.rainyDay,
#custom-weather.rainyNight {
color: #5aaca5;
}
#custom-weather.showyIcyDay,
#custom-weather.snowyIcyNight {
color: #d6e7e5;
}
#custom-weather.default {
color: #dbd9d8;
}
''; '';
}; };
home.packages = with pkgs; [ home.packages = with pkgs; [
@ -616,3 +359,4 @@ in
]; ];
}; };
} }