2 files changed, 57 insertions, 0 deletions
diff --git a/pkgs/astal/src/style/widget/bar.scss b/pkgs/astal/src/style/widget/bar.scss
new file mode 100644
index 0000000..01e73ce
--- /dev/null
+++ b/pkgs/astal/src/style/widget/bar.scss
@@ -0,0 +1,48 @@
+
+.bar {
+  background: $bg;
+
+  .workspaces {
+    margin: $inner-gap $outer-gap;
+
+    .workspace {
+      margin: $inner-gap;
+      border-radius: $inner-radius;
+      min-width: $font-size + $outer-gap;
+      min-height: $font-size + $outer-gap;
+      font-weight: bold;
+    }
+  }
+
+  .right {
+    margin: $inner-gap $outer-gap;
+
+    .wifi,
+    .audio,
+    .battery,
+    .tray {
+      margin: $inner-gap $outer-gap;
+      margin-right: 0px;
+      background: $surface-bg;
+      border-radius: $inner-radius;
+      padding: 0px $outer-gap;
+
+      icon {
+        margin-right: $inner-gap;
+      }
+
+    }
+
+    .tray {
+      padding-right: 0;
+
+      icon {
+        margin-right: $outer-gap;
+      }
+
+      .menubtn:hover {
+        background: transparent;
+      }
+    }
+  }
+}
diff --git a/pkgs/astal/src/style/widget/corners.scss b/pkgs/astal/src/style/widget/corners.scss
new file mode 100644
index 0000000..53cdb9b
--- /dev/null
+++ b/pkgs/astal/src/style/widget/corners.scss
@@ -0,0 +1,9 @@
+
+.corners {
+  $radius: $outer-radius + $outer-gap;
+
+  box {
+    box-shadow: 0 0 0 $radius $bg;
+    border-radius: $radius $radius 0 0;
+  }
+}