nwg-bar, ironbar and some minor things

modules/home/programs/ironbar/styles/main.scss

@@ -0,0 +1,221 @@
+@use "colors" as *;
+
+* {
+  font-family:
+    Product Sans,
+    Roboto,
+    sans-serif,
+    monospace;
+  font-size: 13px;
+  transition: 200ms ease;
+
+  color: $fg;
+  /*background-color: #2d2d2d;*/
+  /*background-color: $bg;*/
+  border: none;
+
+  /*opacity: 0.4;*/
+}
+
+#bar {
+  background-color: $bg;
+}
+
+.container {
+  background-color: $bg;
+}
+
+#right > * + * {
+  margin-left: 20px;
+}
+
+#left > * + * {
+  margin-right: 20px;
+}
+.nix-launcher button {
+  all: unset;
+  background-color: $bg;
+}
+.popup-nix-launcher label {
+  font-family: monospace;
+}
+
+.nix-launcher label {
+  background-color: transparent;
+  color: $bg;
+  font-family: monospace;
+  font-size: 1.5rem;
+  padding: 0 1.1rem 0 0.5rem;
+}
+
+.workspaces {
+  all: unset;
+  margin-left: 10px;
+}
+.workspaces label {
+  font-family: Material Symbols Outlined;
+  font-size: 0.9rem;
+}
+.workspaces .item {
+  all: unset;
+  color: $pink;
+  margin-right: 5px;
+  padding: 0px;
+  font-family: Material Symbols Outlined;
+  border-radius: 20px;
+}
+
+.workspaces .item.focused {
+  color: $red;
+}
+.workspaces .item.focused label {
+  font-size: 1.2rem;
+}
+.workspaces .item.inactive {
+  color: $maroon;
+}
+.workspaces .item.inactive label {
+  font-size: 0.5rem;
+}
+
+.clock {
+  color: $fg;
+  background-color: $bg;
+  font-weight: bold;
+}
+
+.sysinfo {
+  color: $fg;
+}
+
+.tray {
+  background-color: $bg;
+}
+
+.tray .item {
+  background-color: $bg;
+  -gtk-icon-effect: dim;
+}
+
+.upower,
+.upower * {
+  all: unset;
+  background-color: $bg;
+  color: $fg;
+}
+.music-img {
+  border-radius: 8px;
+  margin-right: 8px;
+}
+.music-ctrls * {
+  all: unset;
+  margin-left: 10px;
+}
+
+.music {
+  background-color: $bg;
+  color: $fg;
+}
+.music label {
+  font-size: 16px;
+}
+
+.popup {
+  background-color: $bg;
+  border: 1px solid $subtext0;
+}
+
+.popup-clock {
+  padding: 1em;
+}
+
+.calendar-clock {
+  color: $fg;
+  font-size: 2.5em;
+  padding-bottom: 0.1em;
+}
+
+.calendar {
+  background-color: $bg;
+  color: $fg;
+}
+
+.calendar .header {
+  padding-top: 1em;
+  border-top: 1px solid $subtext0;
+  font-size: 1.5em;
+}
+
+.calendar:selected {
+  background-color: $blue;
+}
+
+.power-menu {
+  margin-left: 10px;
+}
+
+.power-menu .power-btn {
+  color: $fg;
+  background-color: $bg;
+}
+
+.power-menu .power-btn:hover {
+  background-color: $mantle;
+}
+
+.popup-power-menu {
+  padding: 1em;
+}
+
+.popup-power-menu #header {
+  color: $fg;
+  font-size: 1.4em;
+  border-bottom: 1px solid $overlay1;
+  padding-bottom: 0.4em;
+  margin-bottom: 0.8em;
+}
+
+.popup-power-menu .power-btn {
+  color: $fg;
+  background-color: $bg;
+  border: 1px solid $overlay1;
+  padding: 0.6em 1em;
+}
+
+.popup-power-menu .power-btn + .power-btn {
+  margin-left: 1em;
+}
+
+.popup-power-menu .power-btn:hover {
+  background-color: $mantle;
+}
+
+.music {
+  all: unset;
+  color: $fg;
+  font-size: 16px;
+}
+
+.popup-music .album-art {
+  margin-right: 1em;
+  border-radius: 20px;
+}
+
+.popup-music .title .icon-box,
+.popup-mpd .title .icon-icon {
+  font-size: 1.7em;
+}
+
+.popup-music .controls * {
+  border-radius: 0;
+  background-color: transparent;
+  color: $fg;
+}
+
+.popup-music .controls *:disabled {
+  color: $overlay1;
+}
+
+.focused {
+  color: $fg;
+}