Skip to content

B
branding-etersoft-ximper
Verified Commit 8654a0c6 authored by Kirill Unitsaev's avatar Kirill Unitsaev
Browse files
Options

configs/hyprland: update waybar

parent 431c800e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 344 deletions
configs/hyprland/waybar/config
View file @ 8654a0c6
{ {
"layer": "top", "layer": "top",
"position": "top", "position": "top",
"margin-left": 12, "margin-left": 8,
"margin-top": 5, "margin-top": 5,
"margin-right": 12, "margin-right": 8,
"height": 36, "height": 36,
"spacing": 4, "spacing": 4,
"exclusive": true, "exclusive": true,
"gtk-layer-shell": true, "gtk-layer-shell": true,
"passthrough": false, "passthrough": false,
"fixed-center": true, "fixed-center": true,
"reload_style_on_change": true,
"include": [ "include": [
"/etc/ximperdistro/hyprland/waybar/modules.json" "/etc/ximperdistro/hyprland/waybar/modules.json"
], ],
"modules-left": [ "modules-left": [
"image#menu", "image#menu",
"hyprland/workspaces", "hyprland/workspaces",
"tray", "tray"
"hyprland/window",
], ],
"modules-center": [ "modules-center": [
"custom/media", "clock"
], ],
"modules-right": [ "modules-right": [
"idle_inhibitor", "custom/media#mini",
"custom/clipboard",
"hyprland/language", "hyprland/language",
"hyprland/submap", "hyprland/submap",
"group/volume", "group/volume",
"battery",
"network", "network",
"bluetooth", "bluetooth",
"battery", "custom/notification",
"backlight",
"group/notification",
] ]
} }
configs/hyprland/waybar/style-dark.css
View file @ 8654a0c6
* { * {
min-height: 0; min-height: 0;
font-size: 12px; font-size: 14px;
font-family: FiraCode Nerd Font; font-family: Evolventa-Regular, FiraCode Nerd Font;
font-weight: 500; font-weight: 700;
} }
window#waybar { window#waybar {
...@@ -10,231 +10,104 @@ window#waybar { ...@@ -10,231 +10,104 @@ window#waybar {
} }
#image, .module {
#workspaces, background-color: @selected_bg;
#tray,
#window,
#custom-media,
#idle_inhibitor,
#custom-clipboard,
#language,
#submap,
#volume,
#notification,
#network,
#bluetooth,
#battery,
#backlight {
background-color: @bg;
min-height: 0; min-height: 0;
border-radius: 15px; border-radius: 20px;
margin: 2px 5px 0px 0px; margin: 3px 0;
color: @text; padding: 0px 10px;
color: @text;
border: none; border: none;
} }
.module:hover {
#image{
border-radius: 15px;
padding: 0px 10px;
}
#image:hover {
background-color: @selected_bg; background-color: @selected_bg;
} }
#custom-clipboard { .horizontal > widget > box.horizontal > widget > .module {
padding: 0px 15px; margin: 3px 0;
font-size: 12px;
}
#custom-clipboard:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#workspaces { .horizontal > widget > box.horizontal > widget:first-child > .module {
padding: 0px 6px; border-radius: 20px 0 0 20px;
background-color: @bg; margin: 3px 0;
border: none; padding: 0 5px 0 10px;
} }
#workspaces:hover {
background-color: @selected_bg; .horizontal > widget > box.horizontal > widget:not(:first-child):not(:last-child) > .module {
border-radius: 0;
margin: 3px 0;
padding: 0 5px;
} }
#workspaces button {
padding: 0px; .horizontal > widget > box.horizontal > widget:last-child > .module {
margin: 5px 0px; border-radius: 0 20px 20px 0;
color: @selected_text; margin: 3px 0;
padding: 0 10px 0 5px;
} }
#workspaces button.special {
margin: 5px 5px; #workspaces {
padding: 0px 10px 0px 8px; padding: 0;
border-radius: 15px;
border: 2px solid @selected_text;
} }
#workspaces button.special.active { #workspaces button {
color: @border; color: @text;
border: 2px solid @border; margin: 3px;
padding: 0 2px;
border-radius: 20px;
transition: padding,background 200ms ease-in-out 100ms;
} }
#workspaces button:hover { #workspaces button:hover {
color: @text; padding: 0 10px;
background-color: @bg;
} }
#workspaces button.active { #workspaces button.active {
color: @border; background: alpha(@accent, .7);
padding: 0 10px;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: @success; background: alpha(@urgent, .7);
padding: 0px 10px 0px 8px; padding: 0 10px;
border-radius: 15px;
border: 2px solid @success;
} }
#tray { #workspaces button.special {
padding: 0px 10px; padding: 0px 5px;
} }
#tray:hover { #workspaces button.special.active {
color: @selected_text; background: alpha(@accent, .7);
background-color: @selected_bg; padding: 0px 5px;
} }
#tray menu { #workspaces button.special.urgent {
background-color: @bg; background: alpha(@urgent, .7);
padding: 0px 5px;
} }
#window { #tray menu {
padding: 0px 10px;
background-color: @bg; background-color: @bg;
border: none;
}
#window:hover {
color: @selected_text;
background-color: @selected_bg;
}
window#waybar.empty #window {
background-color: transparent;
}
#custom-media {
padding: 0px 15px;
}
#custom-media:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#idle_inhibitor { #idle_inhibitor {
padding: 0px 15px; padding: 0px 10px 0px 7px;
font-size: 12px;
}
#idle_inhibitor:hover {
color: @selected_text;
background-color: @selected_bg;
}
#language {
padding: 0px 15px;
}
#language:hover {
color: @selected_text;
background-color: @selected_bg;
}
#submap {
padding: 0px 15px;
}
#submap:hover {
color: @selected_text;
background-color: @selected_bg;
}
#pulseaudio.volume{
margin: 2px 0px 2px 0px;
border-radius: 12px 0px 0px 12px;
padding: 0px 7px 0px 14px;
}
#pulseaudio.microphone{
margin: 2px 0px 2px 0px;
border-radius: 0px 12px 12px 0px;
padding: 0px 14px 0px 7px;
}
#pulseaudio:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#pulseaudio.volume.muted { #pulseaudio.volume.muted {
color: @unfocused; color: @unfocused;
} }
#pulseaudio.microphone.source-muted { #pulseaudio.microphone.source-muted {
color: @unfocused; color: @unfocused;
} }
#network { window#waybar.empty #window {
padding: 0px 15px; background-color: transparent;
}
#network:hover {
color: @selected_text;
background-color: @selected_bg;
}
#bluetooth {
padding: 0px 15px;
}
#bluetooth:hover {
color: @selected_text;
background-color: @selected_bg;
}
#battery {
padding: 0px 15px;
}
#battery:hover {
color: @selected_text;
background-color: @selected_bg;
}
#backlight {
padding: 0px 15px;
}
#backlight:hover {
color: @selected_text;
background-color: @selected_bg;
}
#clock {
margin: 2px 0px 2px 0px;
border-radius: 12px 0px 0px 12px;
padding: 0px 7px 0px 14px;
}
#clock:hover {
color: @selected_text;
background-color: @selected_bg;
}
#custom-notification {
margin: 2px 0px 2px 0px;
border-radius: 0px 12px 12px 0px;
padding: 0px 14px 0px 7px;
}
#custom-notification:hover {
color: @selected_text;
background-color: @selected_bg;
} }
tooltip { tooltip {
border-radius: 12px; border-radius: 20px;
background: alpha(@bg, 0.80); background: @bg;
color: @text color: @text
} }
tooltip label { tooltip label {
color: @text color: @text
} }
configs/hyprland/waybar/style.css
View file @ 8654a0c6
* { * {
min-height: 0; min-height: 0;
font-size: 12px; font-size: 14px;
font-family: FiraCode Nerd Font; font-family: Evolventa-Regular, FiraCode Nerd Font;
font-weight: 500; font-weight: 700;
} }
window#waybar { window#waybar {
...@@ -10,231 +10,217 @@ window#waybar { ...@@ -10,231 +10,217 @@ window#waybar {
} }
#image, .module {
#workspaces, background-color: @selected_bg;
#tray,
#window,
#custom-media,
#idle_inhibitor,
#custom-clipboard,
#language,
#submap,
#volume,
#notification,
#network,
#bluetooth,
#battery,
#backlight {
background-color: @bg;
min-height: 0; min-height: 0;
border-radius: 15px; border-radius: 20px;
margin: 2px 5px 0px 0px; margin: 3px 0;
color: @text; padding: 0px 10px;
color: @text;
border: none; border: none;
} }
.module:hover {
#image{
border-radius: 15px;
padding: 0px 10px;
}
#image:hover {
background-color: @selected_bg; background-color: @selected_bg;
} }
#custom-clipboard { .horizontal > widget > box.horizontal > widget > .module {
padding: 0px 15px; margin: 3px 0;
font-size: 12px;
}
#custom-clipboard:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#workspaces { .horizontal > widget > box.horizontal > widget:first-child > .module {
padding: 0px 6px; border-radius: 20px 0 0 20px;
background-color: @bg; margin: 3px 0;
border: none; padding: 0 5px 0 10px;
} }
#workspaces:hover {
background-color: @selected_bg; .horizontal > widget > box.horizontal > widget:not(:first-child):not(:last-child) > .module {
border-radius: 0;
margin: 3px 0;
padding: 0 5px;
} }
#workspaces button {
padding: 0px; .horizontal > widget > box.horizontal > widget:last-child > .module {
margin: 5px 0px; border-radius: 0 20px 20px 0;
color: @selected_text; margin: 3px 0;
padding: 0 10px 0 5px;
} }
#workspaces button.special {
margin: 5px 5px; #workspaces {
padding: 0px 10px 0px 8px; padding: 0;
border-radius: 15px;
border: 2px solid @selected_text;
} }
#workspaces button.special.active { #workspaces button {
color: @border; color: @text;
border: 2px solid @border; margin: 3px;
padding: 0 2px;
border-radius: 20px;
transition: padding,background 200ms ease-in-out 100ms;
} }
#workspaces button:hover { #workspaces button:hover {
color: @text; padding: 0 10px;
background-color: @bg;
} }
#workspaces button.active { #workspaces button.active {
color: @border; background: alpha(@accent, .7);
padding: 0 10px;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: @success; background: alpha(@urgent, .7);
padding: 0px 10px 0px 8px; padding: 0 10px;
border-radius: 15px;
border: 2px solid @success;
} }
#tray { #workspaces button.special {
padding: 0px 10px; padding: 0px 5px;
} }
#tray:hover { #workspaces button.special.active {
color: @selected_text; background: alpha(@accent, .7);
background-color: @selected_bg; padding: 0px 5px;
} }
#workspaces button.special.urgent {
background: alpha(@urgent, .7);
padding: 0px 5px;
}
#tray menu { #tray menu {
background-color: @bg; background-color: @bg;
} }
#window { #idle_inhibitor {
padding: 0px 10px; padding: 0px 10px 0px 7px;
background-color: @bg;
border: none;
} }
#window:hover {
color: @selected_text; #pulseaudio.volume.muted {
background-color: @selected_bg; color: @unfocused;
}
#pulseaudio.microphone.source-muted {
color: @unfocused;
} }
window#waybar.empty #window { window#waybar.empty #window {
background-color: transparent; background-color: transparent;
} }
tooltip {
border-radius: 20px;
#custom-media { background: @bg;
padding: 0px 15px; color: @text
} }
#custom-media:hover { tooltip label {
color: @selected_text; color: @text
background-color: @selected_bg; }
* {
min-height: 0;
font-size: 14px;
font-family: Evolventa-Regular, FiraCode Nerd Font;
font-weight: 700;
} }
window#waybar {
background: none;
}
#idle_inhibitor { .module {
padding: 0px 15px;
font-size: 12px;
}
#idle_inhibitor:hover {
color: @selected_text;
background-color: @selected_bg; background-color: @selected_bg;
min-height: 0;
border-radius: 20px;
margin: 3px 0;
padding: 0px 10px;
color: @text;
border: none;
} }
#language { .module:hover {
padding: 0px 15px;
}
#language:hover {
color: @selected_text;
background-color: @selected_bg; background-color: @selected_bg;
} }
#submap { .horizontal > widget > box.horizontal > widget > .module {
padding: 0px 15px; margin: 3px 0;
}
#submap:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#pulseaudio.volume{ .horizontal > widget > box.horizontal > widget:first-child > .module {
margin: 2px 0px 2px 0px; border-radius: 20px 0 0 20px;
border-radius: 12px 0px 0px 12px; margin: 3px 0;
padding: 0px 7px 0px 14px; padding: 0 5px 0 10px;
}
#pulseaudio.microphone{
margin: 2px 0px 2px 0px;
border-radius: 0px 12px 12px 0px;
padding: 0px 14px 0px 7px;
} }
#pulseaudio:hover { .horizontal > widget > box.horizontal > widget:not(:first-child):not(:last-child) > .module {
color: @selected_text; border-radius: 0;
background-color: @selected_bg; margin: 3px 0;
padding: 0 5px;
} }
#pulseaudio.volume.muted { .horizontal > widget > box.horizontal > widget:last-child > .module {
color: @unfocused; border-radius: 0 20px 20px 0;
margin: 3px 0;
padding: 0 10px 0 5px;
} }
#pulseaudio.microphone.source-muted { #workspaces {
color: @unfocused; padding: 0;
} }
#network { #workspaces button {
padding: 0px 15px; color: @text;
} margin: 3px;
#network:hover { padding: 0 2px;
color: @selected_text; border-radius: 20px;
background-color: @selected_bg; transition: padding,background 200ms ease-in-out 100ms;
} }
#bluetooth { #workspaces button:hover {
padding: 0px 15px; padding: 0 10px;
}
#bluetooth:hover {
color: @selected_text;
background-color: @selected_bg;
} }
#battery { #workspaces button.active {
padding: 0px 15px; background: alpha(@accent, .7);
padding: 0 10px;
} }
#battery:hover { #workspaces button.urgent {
color: @selected_text; background: alpha(@urgent, .7);
background-color: @selected_bg; padding: 0 10px;
} }
#backlight { #workspaces button.special {
padding: 0px 15px; padding: 0px 5px;
} }
#backlight:hover { #workspaces button.special.active {
color: @selected_text; background: alpha(@accent, .7);
background-color: @selected_bg; padding: 0px 5px;
}
#workspaces button.special.urgent {
background: alpha(@urgent, .7);
padding: 0px 5px;
} }
#clock { #tray menu {
margin: 2px 0px 2px 0px; background-color: @bg;
border-radius: 12px 0px 0px 12px;
padding: 0px 7px 0px 14px;
} }
#clock:hover {
color: @selected_text; #idle_inhibitor {
background-color: @selected_bg; padding: 0px 10px 0px 7px;
} }
#custom-notification { #pulseaudio.volume.muted {
margin: 2px 0px 2px 0px; color: @unfocused;
border-radius: 0px 12px 12px 0px;
padding: 0px 14px 0px 7px;
} }
#custom-notification:hover { #pulseaudio.microphone.source-muted {
color: @selected_text; color: @unfocused;
background-color: @selected_bg;
} }
window#waybar.empty #window {
background-color: transparent;
}
tooltip { tooltip {
border-radius: 12px; border-radius: 20px;
background: alpha(@bg, 0.80); background: @bg;
color: @text color: @text
} }
tooltip label { tooltip label {
color: @text color: @text
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment