home: move waybar's style to a CSS file

2 files changed, 84 insertions, 87 deletions

diff --git a/home/wm/waybar/default.nix b/home/wm/waybar/default.nix
index 6bc385f..928d7d2 100644
--- a/home/wm/waybar/default.nix
+++ b/home/wm/waybar/default.nix
@@ -46,93 +46,7 @@ in {
           };
         };
       }];
-
-      style = ''
-        * {
-          border-radius: 0;
-          border: none;
-          margin: 0;
-          min-height: 0;
-          padding: 0;
-        }
-        #waybar {
-          font-family: Source Code Pro;
-          font-size: 15px;
-        }
-        window#waybar {
-          background-color: rgba(43, 48, 59, 0.5);
-          color: #ffffff;
-          transition-property: background-color;
-          transition-duration: .5s;
-        }
-        #workspaces button {
-          padding: 0 3px;
-          background-color: transparent;
-          color: #888888;
-          box-shadow: inset 0 -3px transparent;
-          font-weight: bold;
-        }
-        #workspaces button.focused {
-          background-color: #285577;
-          border: 1px solid #4c7899;
-          color: #ffffff;
-        }
-        #workspaces button.urgent {
-          background-color: #900000;
-          color: #ffffff;
-          border: 1px solid #2f343a;
-        }
-        #tray {
-          /* No styles */
-        }
-        #clock,
-        #battery,
-        #network,
-        #pulseaudio,
-        #tray,
-        #mode {
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-        #mode {
-          background: #64727D;
-          border-top: 2px solid white;
-          /* To compensate for the top border and still have vertical centering */
-          padding-bottom: 2px;
-        }
-        #clock {
-          /* No styles */
-        }
-        #battery {
-          animation-timing-function: linear;
-          animation-iteration-count: infinite;
-          animation-direction: alternate;
-        }
-        #battery.discharging {
-          color: #90a1ad;
-        }
-        #battery.charging {
-          color: #fffff8;
-        }
-        #battery.warning {
-          border-bottom: 2px solid #ff9e21;
-        }
-        #battery.critical {
-          border-bottom: 2px solid #ff3121;
-        }
-        #network {
-          /* No styles */
-        }
-        #network.disconnected {
-          color: orange;
-        }
-        #pulseaudio {
-          /* No styles */
-        }
-        #pulseaudio.muted {
-          color: #90a1ad;
-        }
-      '';
+      style = (builtins.readFile ./style.css);
     };
   };
 }
diff --git a/home/wm/waybar/style.css b/home/wm/waybar/style.css
new file mode 100644
index 0000000..7f1d9c3
--- /dev/null
+++ b/home/wm/waybar/style.css
@@ -0,0 +1,83 @@
+* {
+  border-radius: 0;
+  border: none;
+  margin: 0;
+  min-height: 0;
+  padding: 0;
+}
+#waybar {
+  font-family: Source Code Pro;
+  font-size: 15px;
+}
+window#waybar {
+  background-color: rgba(43, 48, 59, 0.5);
+  color: #ffffff;
+  transition-property: background-color;
+  transition-duration: .5s;
+}
+#workspaces button {
+  padding: 0 3px;
+  background-color: transparent;
+  color: #888888;
+  box-shadow: inset 0 -3px transparent;
+}
+#workspaces button.focused {
+  background-color: #285577;
+  border: 1px solid #4c7899;
+  color: #ffffff;
+}
+#workspaces button.urgent {
+  background-color: #900000;
+  color: #ffffff;
+  border: 1px solid #2f343a;
+}
+#tray {
+  /* No styles */
+}
+#clock,
+#battery,
+#network,
+#pulseaudio,
+#tray,
+#mode {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+#mode {
+  background: #64727D;
+  border-top: 2px solid white;
+  /* To compensate for the top border and still have vertical centering */
+  padding-bottom: 2px;
+}
+#clock {
+  /* No styles */
+}
+#battery {
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+#battery.discharging {
+  color: #90a1ad;
+}
+#battery.charging {
+  color: #fffff8;
+}
+#battery.warning {
+  border-bottom: 2px solid #ff9e21;
+}
+#battery.critical {
+  border-bottom: 2px solid #ff3121;
+}
+#network {
+  /* No styles */
+}
+#network.disconnected {
+  color: orange;
+}
+#pulseaudio {
+  /* No styles */
+}
+#pulseaudio.muted {
+  color: #90a1ad;
+}