waybar: clean up styles and config
This commit is contained in:
parent
4548e54b58
commit
e6f9307c9f
SSH key fingerprint:
SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 141 additions and 282 deletions
|
|
@ -3,13 +3,14 @@
|
||||||
"position": "right", // Waybar position (top|bottom|left|right)
|
"position": "right", // Waybar position (top|bottom|left|right)
|
||||||
//"height": 40,
|
//"height": 40,
|
||||||
"margin": "0 5 5 5",
|
"margin": "0 5 5 5",
|
||||||
//"width": 1350, // Waybar width
|
"width": 50,
|
||||||
// Choose the order of the modules idle_inhibitor
|
// Choose the order of the modules idle_inhibitor
|
||||||
"modules-left": [
|
"modules-left": [
|
||||||
"hyprland/workspaces",
|
"hyprland/workspaces",
|
||||||
"niri/workspaces",
|
"niri/workspaces",
|
||||||
"tray",
|
"tray",
|
||||||
"custom/media"
|
"custom/media",
|
||||||
|
"privacy"
|
||||||
],
|
],
|
||||||
"modules-center": [],
|
"modules-center": [],
|
||||||
"modules-right": [
|
"modules-right": [
|
||||||
|
|
@ -17,7 +18,6 @@
|
||||||
"wireplumber",
|
"wireplumber",
|
||||||
"backlight",
|
"backlight",
|
||||||
"battery",
|
"battery",
|
||||||
"privacy",
|
|
||||||
"clock",
|
"clock",
|
||||||
"custom/swaync"
|
"custom/swaync"
|
||||||
],
|
],
|
||||||
|
|
@ -159,7 +159,7 @@
|
||||||
},
|
},
|
||||||
"privacy": {
|
"privacy": {
|
||||||
"icon-spacing": 4,
|
"icon-spacing": 4,
|
||||||
"icon-size": 18,
|
"icon-size": 24,
|
||||||
"transition-duration": 250,
|
"transition-duration": 250,
|
||||||
"modules": [
|
"modules": [
|
||||||
{
|
{
|
||||||
|
|
@ -167,11 +167,6 @@
|
||||||
"tooltip": true,
|
"tooltip": true,
|
||||||
"tooltip-icon-size": 24
|
"tooltip-icon-size": 24
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// "type": "audio-out",
|
|
||||||
// "tooltip": true,
|
|
||||||
// "tooltip-icon-size": 24
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
"type": "audio-in",
|
"type": "audio-in",
|
||||||
"tooltip": true,
|
"tooltip": true,
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,11 @@
|
||||||
@import "colors.css";
|
@import "colors.css";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
/* `otf-font-awesome` is required to be installed for icons */
|
|
||||||
/* font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
/* border-radius: 10px;*/
|
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
}
|
/* `otf-font-awesome` is required to be installed for icons */
|
||||||
|
/* font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
|
||||||
.module {
|
/* border-radius: 10px;*/
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window#waybar {
|
window#waybar {
|
||||||
|
|
@ -18,34 +13,148 @@ window#waybar {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
window#waybar.hidden {
|
.module,#privacy-item {
|
||||||
opacity: 0.2;
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#privacy-item,
|
||||||
|
#clock,
|
||||||
|
#temperature,
|
||||||
|
#network,
|
||||||
|
#pulseaudio,
|
||||||
|
#custom-media,
|
||||||
|
#tray,
|
||||||
|
#mode,
|
||||||
|
#idle_inhibitor,
|
||||||
|
#privacy-item,
|
||||||
|
#mpd,
|
||||||
|
#workspaces {
|
||||||
|
color: @primary;
|
||||||
|
background-color: @background;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpu,
|
||||||
|
#memory,
|
||||||
|
#disk,
|
||||||
|
#battery,
|
||||||
|
#backlight,
|
||||||
|
#wireplumber {
|
||||||
|
color: @secondary;
|
||||||
|
background-color: @background;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network,
|
||||||
|
#custom-media {
|
||||||
|
color: @tertiary;
|
||||||
|
background-color: @background;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network.disconnected,
|
||||||
|
#wireplumber.muted {
|
||||||
|
color: @error;
|
||||||
|
background-color: @error_container;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
window#waybar.empty {
|
* hover variants
|
||||||
background-color: transparent;
|
*/
|
||||||
}
|
|
||||||
window#waybar.solo {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*button {
|
#privacy-item:hover,
|
||||||
border: none;
|
#clock:hover,
|
||||||
border-radius: 0;
|
#temperature:hover,
|
||||||
}*/
|
#network:hover,
|
||||||
|
#pulseaudio:hover,
|
||||||
|
#custom-media:hover,
|
||||||
|
#tray:hover,
|
||||||
|
#mode:hover,
|
||||||
|
#idle_inhibitor:hover,
|
||||||
|
#privacy-item:hover,
|
||||||
|
#mpd:hover,
|
||||||
|
#workspaces:hover {
|
||||||
|
color: @on_primary_container;
|
||||||
|
background-color: @primary_container;
|
||||||
|
}
|
||||||
|
|
||||||
#workspaces {
|
#cpu:hover,
|
||||||
|
#memory:hover,
|
||||||
|
#disk:hover,
|
||||||
|
#battery:hover,
|
||||||
|
#backlight:hover,
|
||||||
|
#wireplumber:hover {
|
||||||
|
color: @on_secondary_container;
|
||||||
|
background-color: @secondary_container;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network:hover,
|
||||||
|
#custom-media:hover {
|
||||||
|
color: @on_tertiary_container;
|
||||||
|
background-color: @tertiary_container;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network.disconnected:hover,
|
||||||
|
#wireplumber.muted:hover {
|
||||||
|
color: @on_error_container;
|
||||||
|
background-color: @error_container;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* module variations
|
||||||
|
*/
|
||||||
|
|
||||||
|
#tray > .needs-attention {
|
||||||
|
-gtk-icon-effect: highlight;
|
||||||
|
background-color: #eb4d4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock {
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#custom-swaync {
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
color: @background;
|
||||||
|
background-color: @primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
#custom-swaync:hover {
|
||||||
|
color: @primary;
|
||||||
background-color: @background;
|
background-color: @background;
|
||||||
color: @primary;
|
|
||||||
/* border-radius: 10px;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button {
|
|
||||||
color: @primary;
|
#wireplumber {
|
||||||
padding: 5 0px;
|
margin-bottom: 0px;
|
||||||
border-radius: inherit;
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#backlight {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#battery {
|
||||||
|
margin-top: 0px;
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#battery.charging, #battery.plugged {
|
||||||
|
color: #26A65B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* workspace indicator styles */
|
||||||
|
#workspaces {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button.active {
|
#workspaces button.active {
|
||||||
|
|
@ -53,252 +162,7 @@ window#waybar.solo {
|
||||||
background-color: @primary_container;
|
background-color: @primary_container;
|
||||||
}
|
}
|
||||||
|
|
||||||
#workspaces button:hover {
|
|
||||||
color: @on_primary;
|
|
||||||
background: @on_primary_container;
|
|
||||||
border: 0px solid black;
|
|
||||||
}/*
|
|
||||||
|
|
||||||
#workspaces button.urgent {
|
#workspaces button.urgent {
|
||||||
color: @error;
|
color: @error;
|
||||||
background-color: @error_container;
|
background-color: @error_container;
|
||||||
}*/
|
|
||||||
|
|
||||||
#clock,
|
|
||||||
#battery,
|
|
||||||
#cpu,
|
|
||||||
#memory,
|
|
||||||
#disk,
|
|
||||||
#temperature,
|
|
||||||
#backlight,
|
|
||||||
#network,
|
|
||||||
#pulseaudio,
|
|
||||||
#wireplumber,
|
|
||||||
#custom-media,
|
|
||||||
#tray,
|
|
||||||
#mode,
|
|
||||||
#idle_inhibitor,
|
|
||||||
#scratchpad,
|
|
||||||
#power-profiles-daemon,
|
|
||||||
#mpd {
|
|
||||||
padding: 10 0px;
|
|
||||||
background-color: @background;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clock {
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
background-color: @background;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-swaync {
|
|
||||||
border-top-left-radius: 0px;
|
|
||||||
border-top-right-radius: 0px;
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
|
|
||||||
border-left: none;
|
|
||||||
|
|
||||||
background-color: @primary;
|
|
||||||
color: @background;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#wireplumber {
|
|
||||||
background-color: @background;
|
|
||||||
color: @secondary;
|
|
||||||
|
|
||||||
margin-bottom: 0px;
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#backlight {
|
|
||||||
background-color: @background;
|
|
||||||
color: @secondary;
|
|
||||||
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#battery {
|
|
||||||
background-color: @background;
|
|
||||||
color: @secondary;
|
|
||||||
margin-top: 0px;
|
|
||||||
border-top-left-radius: 0px;
|
|
||||||
border-top-right-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#battery.charging, #battery.plugged {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #26A65B;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
to {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Using steps() instead of linear as a timing function to limit cpu usage */
|
|
||||||
#battery.critical:not(.charging) {
|
|
||||||
background-color: #f53c3c;
|
|
||||||
color: #ffffff;
|
|
||||||
animation-name: blink;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-timing-function: steps(12);
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-direction: alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cpu {
|
|
||||||
background-color: @primary;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#memory {
|
|
||||||
background-color: @background;
|
|
||||||
color: @secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disk {
|
|
||||||
background-color: @background;
|
|
||||||
color: @tertiary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#network {
|
|
||||||
background-color: @background;
|
|
||||||
color: @tertiary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#network.disconnected {
|
|
||||||
background-color: @background;
|
|
||||||
color: @error;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wireplumber.muted {
|
|
||||||
background-color: @background;
|
|
||||||
color: @error;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-media {
|
|
||||||
background-color: @background;
|
|
||||||
color: @tertiary;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tray {
|
|
||||||
background-color: @background;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tray > .passive {
|
|
||||||
-gtk-icon-effect: dim;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tray > .needs-attention {
|
|
||||||
-gtk-icon-effect: highlight;
|
|
||||||
background-color: #eb4d4b;
|
|
||||||
}
|
|
||||||
|
|
||||||
#privacy {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#privacy-item {
|
|
||||||
padding: 0 5px;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* hover variants
|
|
||||||
*/
|
|
||||||
|
|
||||||
#clock:hover {
|
|
||||||
background-color: @primary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-swaync:hover {
|
|
||||||
background-color: @background;
|
|
||||||
color: @primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#battery:hover {
|
|
||||||
background-color: @secondary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cpu:hover {
|
|
||||||
background-color: @primary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#memory:hover {
|
|
||||||
background-color: @secondary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disk:hover {
|
|
||||||
background-color: @background;
|
|
||||||
color: @tertiary;
|
|
||||||
}
|
|
||||||
|
|
||||||
#backlight:hover {
|
|
||||||
background-color: @tertiary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#network:hover {
|
|
||||||
background-color: @secondary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#network.disconnected:hover {
|
|
||||||
background-color: @error;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wireplumber:hover {
|
|
||||||
background-color: @tertiary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wireplumber.muted:hover {
|
|
||||||
background-color: @error;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom-media:hover {
|
|
||||||
background-color: @tertiary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tray:hover {
|
|
||||||
background-color: @primary;
|
|
||||||
color: @background;
|
|
||||||
}
|
|
||||||
|
|
||||||
#privacy:hover {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#privacy-item:hover {
|
|
||||||
background-color: @primary;
|
|
||||||
color: @background;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue