add:waybar

waybar/style.css

@@ -0,0 +1,133 @@
+@import "mocha.css";
+
+* {
+    /* https://docs.gtk.org/gtk3/css-overview.html#colors */
+    color: @text;
+    font-family: "JetBrainsMono Nerd Font";
+    font-size: 12pt;
+    font-weight: bold;
+    border-radius: 8px;
+    transition-property: background-color;
+    transition-duration: 0.5s;
+}
+@keyframes blink_red {
+    to {
+        background-color: @red;
+        color: @base;
+    }
+}
+.warning,
+.critical,
+.urgent {
+    animation-name: blink_red;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+window#waybar {
+    background-color: @mantle;
+    border: 2px solid alpha(@crust, 0.3);
+}
+/*
+window > box {
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-top: 5px;
+    background-color: shade(@base, 0.9);
+    padding: 3px;
+    padding-left: 8px;
+    border: 2px none @blue;
+}
+*/
+#workspaces {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+#workspaces button {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+#workspaces button.active {
+    background-color: @surface2;
+    color: @base;
+}
+#workspaces button.urgent {
+    color: @base;
+}
+#workspaces button:hover {
+    background-color: @surface0;
+    color: @base;
+}
+tooltip {
+    background: @mantle;
+}
+tooltip label {
+    color: @subtext1;
+}
+#custom-launcher {
+    font-size: 20px;
+    padding-left: 8px;
+    padding-right: 6px;
+    color: #7ebae4;
+}
+
+#custom-powermenu {
+    color: @red;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#memory {
+    color: @teal;
+}
+#cpu {
+    color: @maroon;
+}
+#clock {
+    color: @subtext1;
+}
+
+#idle_inhibitor {
+    color: @pink;
+    padding-right: 8px;
+}
+#battery {
+    min-width: 55px;
+    color: @sky;
+}
+#battery.charging,
+#battery.full,
+#battery.plugged {
+    color: @green;
+}
+#battery.warning:not(.charging) {
+    color: @yellow;
+}
+#battery.critical:not(.charging) {
+    color: @red;
+}
+#custom-wall {
+    color: @sky;
+}
+#temperature {
+    color: @sky;
+}
+#backlight {
+    color: @peach;
+}
+#pulseaudio {
+    color: @flamingo;
+}
+#network {
+    color: @sapphire;
+}
+#network.disconnected {
+    color: @subtext0;
+}
+#tray {
+    padding-right: 8px;
+    padding-left: 10px;
+}