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)
|
||||
//"height": 40,
|
||||
"margin": "0 5 5 5",
|
||||
//"width": 1350, // Waybar width
|
||||
"width": 50,
|
||||
// Choose the order of the modules idle_inhibitor
|
||||
"modules-left": [
|
||||
"hyprland/workspaces",
|
||||
"niri/workspaces",
|
||||
"tray",
|
||||
"custom/media"
|
||||
"custom/media",
|
||||
"privacy"
|
||||
],
|
||||
"modules-center": [],
|
||||
"modules-right": [
|
||||
|
|
@ -17,7 +18,6 @@
|
|||
"wireplumber",
|
||||
"backlight",
|
||||
"battery",
|
||||
"privacy",
|
||||
"clock",
|
||||
"custom/swaync"
|
||||
],
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
},
|
||||
"privacy": {
|
||||
"icon-spacing": 4,
|
||||
"icon-size": 18,
|
||||
"icon-size": 24,
|
||||
"transition-duration": 250,
|
||||
"modules": [
|
||||
{
|
||||
|
|
@ -167,11 +167,6 @@
|
|||
"tooltip": true,
|
||||
"tooltip-icon-size": 24
|
||||
},
|
||||
// {
|
||||
// "type": "audio-out",
|
||||
// "tooltip": true,
|
||||
// "tooltip-icon-size": 24
|
||||
// },
|
||||
{
|
||||
"type": "audio-in",
|
||||
"tooltip": true,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
@import "colors.css";
|
||||
|
||||
* {
|
||||
font-size: 20px;
|
||||
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;*/
|
||||
font-size: 20px;
|
||||
/* border-radius: 10px;*/
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.module {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
|
|
@ -18,34 +13,148 @@ window#waybar {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
window#waybar.hidden {
|
||||
opacity: 0.2;
|
||||
.module,#privacy-item {
|
||||
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 {
|
||||
background-color: transparent;
|
||||
}
|
||||
window#waybar.solo {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
* hover variants
|
||||
*/
|
||||
|
||||
/*button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}*/
|
||||
|
||||
#workspaces {
|
||||
background-color: @background;
|
||||
color: @primary;
|
||||
/* border-radius: 10px;*/
|
||||
#privacy-item:hover,
|
||||
#clock:hover,
|
||||
#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 button {
|
||||
#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;
|
||||
padding: 5 0px;
|
||||
border-radius: inherit;
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
|
||||
#wireplumber {
|
||||
margin-bottom: 0px;
|
||||
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 {
|
||||
|
|
@ -53,252 +162,7 @@ window#waybar.solo {
|
|||
background-color: @primary_container;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
color: @on_primary;
|
||||
background: @on_primary_container;
|
||||
border: 0px solid black;
|
||||
}/*
|
||||
|
||||
#workspaces button.urgent {
|
||||
color: @error;
|
||||
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