3 files changed, 45 insertions, 4 deletions
diff --git a/pkgs/astal/src/style/style.scss b/pkgs/astal/src/style/style.scss
index 0c66051..ddef6c7 100644
--- a/pkgs/astal/src/style/style.scss
+++ b/pkgs/astal/src/style/style.scss
@@ -4,6 +4,10 @@
 
 @import "./theme";
 
+@function gtkalpha($c, $a) {
+    @return string.unquote("alpha(#{$c},#{$a})");
+}
+
 * {
     all: unset;
 }
diff --git a/pkgs/astal/src/style/widget/deck.scss b/pkgs/astal/src/style/widget/deck.scss
index d7dd69c..adf8c00 100644
--- a/pkgs/astal/src/style/widget/deck.scss
+++ b/pkgs/astal/src/style/widget/deck.scss
@@ -1,8 +1,4 @@
 
-@function gtkalpha($c, $a) {
-    @return string.unquote("alpha(#{$c},#{$a})");
-}
-
 $deck-scale: $font-size * 4;
 
 .deck {
diff --git a/pkgs/astal/src/style/widget/launcher.scss b/pkgs/astal/src/style/widget/launcher.scss
new file mode 100644
index 0000000..b39d292
--- /dev/null
+++ b/pkgs/astal/src/style/widget/launcher.scss
@@ -0,0 +1,41 @@
+
+.launcher {
+    > box {
+        padding: 5em;
+        background: gtkalpha($bg, 0.7);
+        border-radius: $outer-radius;
+    }
+
+	.search {
+		margin-bottom: 5em;
+		color: $surface-fg;
+		background: $surface-bg;
+		padding: $outer-gap;
+		border-radius: $outer-radius;
+		min-width: 20em;
+	}
+
+	.app {
+    	background: transparent;
+		padding: $outer-gap;
+		margin: $outer-gap;
+		border-radius: $outer-radius;
+		min-width: 15em;
+		min-height: 15em;
+
+		&:hover {
+			background: gtkalpha($hover-bg, .5);
+		}
+
+		icon {
+			font-size: 9em;
+		}
+
+		.name {
+			margin-top: $outer-gap;
+			font-size: 1.25em;
+			color: gtkalpha($fg, 0.9);
+		}
+	}
+
+}