From a6d7a2478065412934c5637fa9c734a626d2390e Mon Sep 17 00:00:00 2001
From: David Heinemeier Hansson <david@hey.com>
Date: Sun, 1 Jun 2025 15:55:05 +0200
Subject: [PATCH] Basic styles

---
 config/wofi/config    |  15 +++++
 config/wofi/style.css | 148 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 163 insertions(+)
 create mode 100644 config/wofi/config
 create mode 100644 config/wofi/style.css

diff --git a/config/wofi/config b/config/wofi/config
new file mode 100644
index 0000000..adf78c7
--- /dev/null
+++ b/config/wofi/config
@@ -0,0 +1,15 @@
+width=600
+height=350
+location=center
+show=drun
+prompt=Search...
+filter_rate=100
+allow_markup=true
+no_actions=true
+halign=fill
+orientation=vertical
+content_halign=fill
+insensitive=true
+allow_images=true
+image_size=40
+gtk_dark=true
diff --git a/config/wofi/style.css b/config/wofi/style.css
new file mode 100644
index 0000000..8260ef8
--- /dev/null
+++ b/config/wofi/style.css
@@ -0,0 +1,148 @@
+@define-color	rosewater  #f5e0dc;
+@define-color	rosewater-rgb  rgb(245, 224, 220);
+@define-color	flamingo  #f2cdcd;
+@define-color	flamingo-rgb  rgb(242, 205, 205);
+@define-color	pink  #f5c2e7;
+@define-color	pink-rgb  rgb(245, 194, 231);
+@define-color	mauve  #cba6f7;
+@define-color	mauve-rgb  rgb(203, 166, 247);
+@define-color	red  #f38ba8;
+@define-color	red-rgb  rgb(243, 139, 168);
+@define-color	maroon  #eba0ac;
+@define-color	maroon-rgb  rgb(235, 160, 172);
+@define-color	peach  #fab387;
+@define-color	peach-rgb  rgb(250, 179, 135);
+@define-color	yellow  #f9e2af;
+@define-color	yellow-rgb  rgb(249, 226, 175);
+@define-color	green  #a6e3a1;
+@define-color	green-rgb  rgb(166, 227, 161);
+@define-color	teal  #94e2d5;
+@define-color	teal-rgb  rgb(148, 226, 213);
+@define-color	sky  #89dceb;
+@define-color	sky-rgb  rgb(137, 220, 235);
+@define-color	sapphire  #74c7ec;
+@define-color	sapphire-rgb  rgb(116, 199, 236);
+@define-color	blue  #89b4fa;
+@define-color	blue-rgb  rgb(137, 180, 250);
+@define-color	lavender  #b4befe;
+@define-color	lavender-rgb  rgb(180, 190, 254);
+@define-color	text  #cdd6f4;
+@define-color	text-rgb  rgb(205, 214, 244);
+@define-color	subtext1  #bac2de;
+@define-color	subtext1-rgb  rgb(186, 194, 222);
+@define-color	subtext0  #a6adc8;
+@define-color	subtext0-rgb  rgb(166, 173, 200);
+@define-color	overlay2  #9399b2;
+@define-color	overlay2-rgb  rgb(147, 153, 178);
+@define-color	overlay1  #7f849c;
+@define-color	overlay1-rgb  rgb(127, 132, 156);
+@define-color	overlay0  #6c7086;
+@define-color	overlay0-rgb  rgb(108, 112, 134);
+@define-color	surface2  #585b70;
+@define-color	surface2-rgb  rgb(88, 91, 112);
+@define-color	surface1  #45475a;
+@define-color	surface1-rgb  rgb(69, 71, 90);
+@define-color	surface0  #313244;
+@define-color	surface0-rgb  rgb(49, 50, 68);
+@define-color	base  #1e1e2e;
+@define-color	base-rgb  rgb(30, 30, 46);
+@define-color	mantle  #181825;
+@define-color	mantle-rgb  rgb(24, 24, 37);
+@define-color	crust  #11111b;
+@define-color	crust-rgb  rgb(17, 17, 27);
+
+* {
+  font-family: 'CaskaydiaMono Nerd Font', monospace;
+  font-size: 18px;
+}
+
+/* Window */
+window {
+  margin: 0px;
+  padding: 20px;
+  border: 2px solid @lavender;
+  background-color: @base;
+}
+
+/* Inner Box */
+#inner-box {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: @base;
+}
+
+/* Outer Box */
+#outer-box {
+  margin: 0;
+  padding: 20px;
+  border: none;
+  background-color: @base;
+}
+
+/* Scroll */
+#scroll {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: @base;
+}
+
+/* Input */
+#input {
+  margin: 0;
+  padding: 10px;
+  border: none;
+  background-color: @base;
+  color: @text;
+}
+
+#input image {
+    border: none;
+    color: @red;
+}
+
+#input * {
+  /* outline: 4px solid @red!important; */
+}
+
+#input:focus {
+  outline: none;
+  box-shadow: none;
+  border: none;
+}
+
+
+/* Text */
+#text {
+  margin: 5px;
+  border: none;
+  color: @text;
+}
+
+#entry {
+  background-color: @base;
+}
+
+#entry arrow {
+  border: none;
+  color: @lavender;
+}
+
+/* Selected Entry */
+#entry:selected {
+  outline: none;
+  border: none;
+}
+
+#entry:selected #text {
+  color: @mauve;
+}
+
+#entry:drop(active) {
+  background-color: @lavender!important;
+}
+
+#entry image {
+  -gtk-icon-transform: scale(0.7);
+}