update screenshots

README.md

@@ -192,6 +192,41 @@ The possibilities are endless! Here are some powerful examples of what you can b
 
 Found a compatibility issue? We welcome feedback and contributions! While 100% wofi compatibility isn't guaranteed, we're happy to help you transition to Worf.
 
+
+## Styles
+
+The background image used for all screenshots can be found in `images/background.jpg` and is taken in Arthurs Pass New Zealand.
+
+### Dmenu
+![Dmenu](styles/dmenu/example.png)
+
+### Launcher
+![launcher](styles/launcher/example.png)
+
+### Compact
+![compact](styles/compact/example.png)
+
+### IndigoEdge
+![IndigoEdge](styles/IndigoEdge/example.png)
+
+### Emoji
+![emoji](styles/emoji/example.png)
+
+### GlacierPrism
+![GlacierPrism](styles/GlacierPrism/example.png)
+
+### Math
+![math](styles/math/example.png)
+
+### AmberNight
+![AmberNight](styles/AmberNight/example.png)
+
+### Relaxed
+![relaxed](styles/relaxed/example.png)
+                                          
+### DarkBlue
+![darkblue](styles/DarkBlue/example.png)
+
 ---
 
 ## 📄 License

styles/DarkBlue/config.toml

@@ -0,0 +1,7 @@
+image_size=28
+allow_images=true
+term="kitty -e"
+insensitive=true
+key_detection_type="Code"
+blurred_background=false
+lines_size_factor=1.9

styles/DarkBlue/style.css

@@ -0,0 +1,120 @@
+:root {
+  --md-primary-dark: rgba(39, 37, 164, 0.5);
+  --md-on-primary: rgba(255, 255, 255, 1);
+  --md-surface: rgba(18, 18, 18, 1);
+  --md-surface-variant: rgba(26, 26, 26, 0.5);
+  --md-outline: rgba(255, 255, 255, 0.1);
+  --md-hover: rgba(56, 56, 56, 0.7);
+  --md-entry-bg: rgba(38, 38, 38, 0.3);
+  --md-label-bg: rgba(42, 42, 42, 0.5);
+}
+
+
+* {
+  font-family: "Inter", "Segoe UI", sans-serif;
+  transition: all 250ms ease;
+  box-sizing: border-box;
+  color: #e0e0e0;
+  background-color: transparent;
+}
+
+body {
+  background-color: var(--md-surface);
+  margin: 0;
+  padding: 0;
+}
+
+#background {
+  background-color: var(--md-surface-variant);
+}
+
+#window {
+  all: unset;
+  background-color:  rgba(0, 0, 0, 0.4);
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  padding: 1rem;
+  max-width: 600px;
+  margin: 2rem auto;
+}
+
+#window #outer-box {
+  margin: 0;
+}
+
+#window #outer-box #input {
+  background-color: var(--md-label-bg);
+  color: #f0f0f0;
+  border: 1px solid var(--md-outline);
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+#window #outer-box #input:focus,
+#window #outer-box #input:focus-visible,
+#window #outer-box #input:active {
+  background-color: #2d2d2d;
+  border: 1px solid var(--md-primary-dark);
+  box-shadow: 0 0 0 3px var(--md-focus);
+  outline: none;
+}
+
+#window #outer-box #scroll {
+  border-top: 1px solid var(--md-outline);
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+#window #outer-box #scroll #inner-box #entry {
+  color: #f5f5f5;
+  background-color: var(--md-entry-bg);
+  padding: 0.7rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 0.4rem;
+  display: flex;
+  align-items: center;
+  transition: background-color 250ms ease;
+  cursor: pointer;
+}
+
+#window #outer-box #scroll #inner-box #entry:hover {
+  background-color: var(--md-hover);
+}
+
+#window #outer-box #scroll #inner-box #entry:selected {
+  background-color: var(--md-primary-dark);
+  color: var(--md-on-primary);
+}
+
+#window #outer-box #scroll #inner-box #entry #img {
+  margin-right: 0.6rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+#window #outer-box #scroll #inner-box #entry:hover #img {
+  filter: brightness(1.15);
+}
+
+#custom-key-label-box {
+  background-color: var(--md-label-bg);
+  border-radius: 8px;
+  padding: 0.5em 1em;
+  margin: 0.5em 0 0.5em 0.5em;
+  font-weight: 500;
+  color: #eaeaea;
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.03);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+#custom-key-hint-text {
+  margin-left: 0.75em;
+  opacity: 0.6;
+  font-size: 0.95rem;
+}