♻️ refactor(waybar): separate modules and general styling to other files
This commit is contained in:
retrozinndev
@@ -0,0 +1,27 @@
|
||||
@keyframes blink {
|
||||
0% {
|
||||
background: @color3;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: @color2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pick-attention {
|
||||
25% {
|
||||
background: @color6;
|
||||
}
|
||||
|
||||
50% {
|
||||
background: @color1;
|
||||
}
|
||||
|
||||
75% {
|
||||
background: @color6;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: @color1;
|
||||
}
|
||||
}
|
||||
@@ -112,12 +112,6 @@
|
||||
"escape": true
|
||||
},
|
||||
|
||||
"custom/control-center": {
|
||||
"format": "loading control center...",
|
||||
"return-type": "json",
|
||||
"exec": "bash $HOME/.config/waybar/modules/control-center.sh"
|
||||
},
|
||||
|
||||
"idle_inhibitor": {
|
||||
"format": "{icon}",
|
||||
"format-icons": {
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
|
||||
@import "./animations.css";
|
||||
|
||||
/* Distro Logo */
|
||||
#custom-logo {
|
||||
padding-left: 12px;
|
||||
padding-right: 18px;
|
||||
font-size: 15.2px;
|
||||
transition: 110ms ease-in;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
/* Workspace Indicator */
|
||||
#workspaces {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
background: @color1;
|
||||
border-radius: 14px;
|
||||
padding: 0 4px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
background: @foreground;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
animation: pick-attention;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#workspace button.special {
|
||||
background: @color3;
|
||||
}
|
||||
|
||||
#workspaces button:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#workspaces button:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Notifications */
|
||||
widget #custom-notifications {
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
widget #custom-notifications.cc-open {
|
||||
background: @color1;
|
||||
}
|
||||
|
||||
|
||||
/* Current Window Widget */
|
||||
window.empty #window {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Battery */
|
||||
#battery.charging,
|
||||
#battery.plugged {
|
||||
color: @foreground;
|
||||
background-color: @color2;
|
||||
}
|
||||
|
||||
#battery:not(.plugged):not(.charging) {
|
||||
background-color: shade(@color1, .68);
|
||||
}
|
||||
|
||||
#battery.critical:not(.charging) {
|
||||
background-color: @color1;
|
||||
color: @foreground;
|
||||
animation-name: blink;
|
||||
animation-duration: .5s;
|
||||
animation-timing-function: steps(12);
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
|
||||
/* Network and Wi-Fi */
|
||||
#network.disconnected {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* Bluetooth */
|
||||
#bluetooth {
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#bluetooth.connected {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* Pulse Audio */
|
||||
#pulseaudio {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* Media Player Info */
|
||||
#custom-media {
|
||||
box-shadow: none;
|
||||
border: 2px solid @color3;
|
||||
font-weight: 500;
|
||||
transition: 200ms ease-in;
|
||||
}
|
||||
|
||||
#custom-media:hover {
|
||||
background: @color3;
|
||||
}
|
||||
|
||||
|
||||
/* Sensors */
|
||||
#temperature.critical {
|
||||
background-color: @color1;
|
||||
}
|
||||
|
||||
|
||||
/* App Tray */
|
||||
#tray > .passive {
|
||||
-gtk-icon-effect: dim;
|
||||
}
|
||||
|
||||
#tray > .needs-attention {
|
||||
-gtk-icon-effect: highlight;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
|
||||
# Default return
|
||||
CONTROL_CENTER_JSON="{ \"text\": \"\", \"bluetooth\": \"$BLUETOOTH_ACTIVE\" }"
|
||||
$BLUETOOTH_ACTIVE=false
|
||||
|
||||
if [[ $(systemctl is-active bluetooth) =~ "active" ]]
|
||||
then
|
||||
$BLUETOOTH_ACTIVE=true
|
||||
fi
|
||||
+35
-123
@@ -1,9 +1,9 @@
|
||||
|
||||
@import "../../.cache/wal/colors-waybar.css";
|
||||
@import "./modules.css";
|
||||
|
||||
* {
|
||||
color: @foreground;
|
||||
border-radius: 14px;
|
||||
transition: 120ms ease-in;
|
||||
}
|
||||
|
||||
@@ -23,9 +23,11 @@ window > * > * {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* General */
|
||||
.modules-left, .modules-center, .modules-right {
|
||||
.modules-left,
|
||||
.modules-center,
|
||||
.modules-right {
|
||||
background: alpha(@background, .80);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.module {
|
||||
@@ -34,146 +36,56 @@ window > * > * {
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
widget > * {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
widget > *:hover:not(#workspaces):not(#tray):not(#custom-media) {
|
||||
background: @color1;
|
||||
}
|
||||
/***/
|
||||
|
||||
/* Workspaces */
|
||||
#workspaces {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
background: @color1;
|
||||
border-radius: 14px;
|
||||
padding: 0 4px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
#workspaces button.active {
|
||||
background: @foreground;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
animation: pick-attention;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#workspace button.special {
|
||||
background: @color3;
|
||||
}
|
||||
|
||||
#workspaces button:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#workspaces button:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
/***/
|
||||
|
||||
#custom-logo {
|
||||
padding-left: 12px;
|
||||
padding-right: 18px;
|
||||
font-size: 15.2px;
|
||||
transition: 110ms ease-in;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
widget #custom-notifications {
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
widget #custom-notifications.cc-open {
|
||||
background: @color1;
|
||||
}
|
||||
|
||||
window#waybar.empty #window {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
widget #battery.charging,
|
||||
widget #battery.plugged {
|
||||
color: @text;
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
widget #battery:not(.plugged):not(.charging) {
|
||||
background-color: shade(@color1, .68);
|
||||
}
|
||||
|
||||
#battery.critical:not(.charging) {
|
||||
background-color: @color1;
|
||||
color: @foreground;
|
||||
animation-name: blink;
|
||||
animation-duration: .5s;
|
||||
animation-timing-function: steps(12);
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
#network.disconnected {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#bluetooth {
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#bluetooth.connected {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
#custom-media {
|
||||
box-shadow: none;
|
||||
border: 2px solid @color3;
|
||||
widget label {
|
||||
font-size: .98em;
|
||||
font-weight: 500;
|
||||
transition: 200ms ease-in;
|
||||
}
|
||||
|
||||
#custom-media:hover {
|
||||
background: @color3;
|
||||
menu {
|
||||
background: @background;
|
||||
border: none;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#temperature.critical {
|
||||
background-color: @color1;
|
||||
menu > separator {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#tray > .passive {
|
||||
-gtk-icon-effect: dim;
|
||||
menu > * {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#tray > .needs-attention {
|
||||
-gtk-icon-effect: highlight;
|
||||
menu > *:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
color: @color3;
|
||||
}
|
||||
menu > *:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes pick-attention {
|
||||
25% {
|
||||
background: @color4;
|
||||
}
|
||||
|
||||
50% {
|
||||
menu > *:hover {
|
||||
background: @color1;
|
||||
}
|
||||
|
||||
75% {
|
||||
background: @color4;
|
||||
tooltip {
|
||||
padding: 3px;
|
||||
border-radius: 8px;
|
||||
border-color: @color1;
|
||||
background: @background;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: @color1;
|
||||
}
|
||||
tooltip > * {
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user