add fancy themes

styles/AmberNight/config.toml

@@ -0,0 +1,5 @@
+image_size=28
+allow_images=true
+term="kitty -e"
+insensitive=true
+key_detection_type="Code"

styles/AmberNight/style.css

@@ -0,0 +1,115 @@
+:root {
+  --md-primary: #3f51b5;
+  --md-primary-light: #6573c3;
+  --md-primary-dark: #303f9f;
+  --md-on-primary: #ffffff;
+  --md-surface: #121212;
+  --md-surface-variant: #1f1f1f;
+  --md-outline: rgba(255, 255, 255, 0.12);
+  --md-focus: rgba(63, 81, 181, 0.3);
+  --md-border-radius: 12px;
+}
+
+* {
+  font-family: "Inter", "Segoe UI", sans-serif;
+  transition: all 250ms ease;
+  box-sizing: border-box;
+  color: #e0e0e0;
+  background-color: rgba(33, 33, 33, 0); /* base transparent */
+}
+
+body {
+  background-color: var(--md-surface);
+  margin: 0;
+  padding: 0;
+}
+
+#background {
+  background-color: var(--md-surface-variant);
+}
+
+/* Container */
+#window {
+  all: unset;
+  background-color: #1c1c1c;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  padding: 1rem;
+  max-width: 600px;
+  margin: 2rem auto;
+}
+
+#window #outer-box {
+  margin: 0;
+}
+
+#window #outer-box #input {
+  background-color: #282828;
+  color: #f9f9f9;
+  border: 1px solid rgba(100, 100, 100, 0.4);
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+#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);
+  box-shadow: 0 0 0 3px var(--md-focus);
+  outline: none;
+}
+
+#window #outer-box #scroll {
+  border-top: 1px solid rgba(255, 204, 0, 0.4);
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+#window #outer-box #scroll #inner-box #entry {
+  color: #ffffff;
+  background-color: rgba(50, 50, 50, 0.3);
+  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: rgba(255, 255, 255, 0.08);
+}
+
+#window #outer-box #scroll #inner-box #entry:selected {
+  background-color: rgba(255, 204, 0, 0.2);
+}
+
+#window #outer-box #scroll #inner-box #entry #img {
+  margin-right: 0.6rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+#custom-key-label-box {
+  background-color: #2e2e2e; /* solid background */
+  border-radius: 8px;
+  padding: 0.5em 1em;
+  margin: 0.5em 0 0.5em 0.5em; /* margin to separate from entry bg */
+  font-weight: 500;
+  color: #f0f0f0;
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+}
+
+#custom-key-hint-text {
+  margin-left: 0.75em;
+  opacity: 0.7;
+  font-size: 0.95rem;
+}

styles/GlacierPrism/config.toml

@@ -0,0 +1,5 @@
+image_size=28
+allow_images=true
+term="kitty -e"
+insensitive=true
+key_detection_type="Code"

styles/GlacierPrism/style.css

@@ -0,0 +1,86 @@
+* {
+  font-family: "JetBrains Mono", "Inter", sans-serif;
+  transition: all 200ms ease;
+  background-color: rgba(14, 17, 23, 0);
+  color: #e6f1ff;
+}
+
+#background {
+  background-color: rgba(14, 17, 23, 0.95);
+}
+
+#window {
+  all: unset;
+  background-color: rgba(14, 17, 23, 0.95);
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
+  padding: 1rem;
+}
+
+#window #outer-box {
+  margin: 0;
+}
+
+#window #outer-box #input {
+  background-color: rgba(20, 24, 31, 0.95);
+  color: #e6f1ff;
+  border: 1px solid rgba(109, 223, 255, 0.4);
+  border-radius: 10px;
+  padding: 0.8rem 1.1rem;
+  font-size: 1rem;
+  outline: none;
+}
+
+#window #outer-box #input:focus,
+#window #outer-box #input:focus-visible {
+  background-color: rgba(26, 30, 40, 0.98);
+  border: 1px solid #6ddfff;
+  box-shadow: 0 0 6px #6ddfff33;
+}
+
+#window #outer-box #scroll {
+  border-top: 1px solid rgba(109, 223, 255, 0.2);
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+#window #outer-box #scroll #inner-box #entry {
+  background-color: rgba(255, 255, 255, 0.02);
+  padding: 0.7rem 1rem;
+  border-radius: 10px;
+  margin-bottom: 0.4rem;
+  display: flex;
+  align-items: center;
+  transition: background-color 150ms ease;
+}
+
+#window #outer-box #scroll #inner-box #entry:hover {
+  background-color: rgba(109, 223, 255, 0.08);
+}
+
+#window #outer-box #scroll #inner-box #entry:selected {
+  background-color: rgba(187, 154, 255, 0.2);
+  outline: none;
+}
+
+#window #outer-box #scroll #inner-box #entry #img {
+  margin-right: 0.6rem;
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.85;
+}
+
+#custom-key-label-box {
+  background: rgba(36, 42, 56, 0.9);
+  border-radius: 10px;
+  padding: 0.5rem 1rem;
+  margin: 0.5rem 0;
+  color: #d0e9ff;
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
+}
+
+#custom-key-hint-text {
+  margin-left: 0.75rem;
+  font-size: 0.9rem;
+  opacity: 0.7;
+}

styles/IndigoEdge/config.toml

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

styles/IndigoEdge/style.css

@@ -0,0 +1,122 @@
+:root {
+  --md-primary: #3f51b5;
+  --md-primary-dark: #303f9f;
+  --md-primary-darker: #1a237e;
+  --md-on-primary: #ffffff;
+  --md-surface: #121212;
+  --md-surface-variant: #1a1a1a;
+  --md-outline: rgba(255, 255, 255, 0.1);
+  --md-hover: #383838;
+  --md-entry-bg: #262626;
+  --md-label-bg: #2a2a2a;
+  --md-focus: rgba(48, 63, 159, 0.35);
+}
+
+* {
+  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: #181818;
+  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;
+}

styles/compact/config.toml

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

styles/fullscreen/config.toml

@@ -1,9 +0,0 @@
-image_size=64
-columns=6
-orientation="Vertical"
-row_box_orientation="Vertical"
-content_halign="Center"
-height="105%"
-width="100%"
-anchor="top,bottom,left,right"
-valign="Start"

styles/fullscreen/style.css

@@ -1,70 +0,0 @@
-* {
-  font-family: DejaVu;
-}
-
-#window {
-  all: unset;
-  background-color: rgba(33, 33, 33, 0.76); /* Matches #212121BB */
-  border-radius: 0;
-  padding-top: 3rem;
-}
-
-#window #outer-box {
-}
-
-#window #outer-box #input {
-  background-color: rgba(32, 32, 32, 0.6);
-  color: #f2f2f2;
-  border-bottom: 2px solid rgba(214, 174, 0, 1);
-  font-size: 1rem;
-  margin: 1rem 50rem 2rem;
-}
-
-#window #outer-box #input:focus, #window #outer-box #input:focus-visible, #window #outer-box #input:active {
-  all: unset;
-  background-color: rgba(32, 32, 32, 0.6);
-  color: #f2f2f2;
-  border-bottom: 2px solid rgba(214, 174, 2, 1);
-  font-size: 1rem;
-}
-
-#window #outer-box #scroll #inner-box {
-  padding: 0 20rem;
-
-}
-
-#window #outer-box #scroll #inner-box #entry {
-  color: #fff;
-  background-color: rgba(32, 32, 32, 0.1);
-  margin: 2em;
-  padding: 1em;
-  border-radius: 0.5rem;
-  border-bottom: 5px solid rgba(32, 32, 32, 0.1);
-
-}
-#window #outer-box #scroll #inner-box #entry #img {
-  margin-right: 0.5rem;
-}
-
-#window #outer-box #scroll #inner-box #entry:selected {
-  color: #fff;
-  background-color: rgba(255, 255, 255, 0.1);
-  outline: none;
-  border-bottom: 5px solid rgba(214, 174, 0, 1);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-#row:hover {
-  background-color:  rgba(255, 255, 255, 0);
-  outline: inherit;
-}
-#window #outer-box #scroll #inner-box #entry:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  outline: inherit;
-}
-
-#text {
-  margin-top: 1rem;
-  margin-bottom: 0;
-}

styles/launcher/config.toml

@@ -1,10 +1,12 @@
 image_size=64
-columns=6
+columns=4
 orientation="Vertical"
 row_box_orientation="Vertical"
 content_halign="Center"
-height="70%"
+height="105%"
-width="60%"
+width="100%"
 valign="Start"
-blurred_background=true
+blurred_background=false
 line_max_chars=32
+key_detection_type="Code"
+term="kitty -e"

styles/launcher/style.css

@@ -1,72 +1,129 @@
+:root {
+  --bg-blur: rgba(33, 33, 33, 0.6);
+  --entry-hover: rgba(255, 255, 255, 0.08);
+  --entry-selected: rgba(214, 174, 0, 0.2);
+  --search-bg: rgba(32, 32, 32, 0.6);
+  --search-border: rgba(214, 174, 0, 1);
+  --text-color: #f2f2f2;
+  --font: 'DejaVu Sans', 'Segoe UI', sans-serif;
+  --transition: 0.2s ease;
+}
+
+/* General Reset */
 * {
-  font-family: DejaVu;
+  font-family: var(--font);
+  box-sizing: border-box;
 }
 
 #background {
-  background-color: rgba(33, 33, 33, 0.1);
+  background-color: rgba(33, 33, 33, 0.25);
+  backdrop-filter: blur(12px);
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  padding: 4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 #window {
   all: unset;
-  background-color: rgba(33, 33, 33, 0.8); /* Matches #212121BB */
+  background-color: rgba(33, 33, 33, 0.1); /* #212121BB */
-  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  margin-top: 2em;
+  margin-left: 15em;
+  margin-right: 15em;
+  margin-bottom: 5em;
 }
 
-#window #outer-box {
+/* Outer-box is the app container grid */
-  /* The name of the search bar */
+#outer-box {
-  /* The name of the scrolled window containing all of the entries */
+  border-radius: 60px;
-  border: 2px solid rgba(63, 81, 181, 1);
+  display: grid;
-  border-radius: 6px;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 2rem;
+  padding: 1rem;
+  justify-items: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-#window #outer-box #input {
+/* Search input styling */
-  background-color: rgba(32, 32, 32, 0.6);
+#input {
-  color: #f2f2f2;
+  background-color: var(--search-bg);
-  border-bottom: 2px solid rgba(214, 174, 0, 1);
+  color: var(--text-color);
+  border-bottom: 2px solid var(--search-border);
   padding: 0.8rem 1rem;
   font-size: 1rem;
+  border-radius: 6px;
+  text-align: center;
+  outline: none;
+  margin-left: 25em;
+  margin-right: 25em;
+  margin-bottom: 5em;
+  margin-top: 2em;
 }
 
-#window #outer-box #input:focus, #window #outer-box #input:focus-visible, #window #outer-box #input:active {
+#input:focus,
+#input:focus-visible,
+#input:active {
   all: unset;
-  background-color: rgba(32, 32, 32, 0.6);
+  background-color: var(--search-bg);
-  color: #f2f2f2;
+  color: var(--text-color);
   border-bottom: 2px solid rgba(214, 174, 2, 1);
   font-size: 1rem;
 }
 
-#window #outer-box #scroll #inner-box #entry {
+/* Entry styling */
+#scroll #inner-box #entry {
   color: #fff;
-  background-color: rgba(32, 32, 32, 0.1);
+  background-color: rgba(32, 32, 32, 0);
   padding: 1rem;
   margin: 1rem;
   border-radius: 0.5rem;
   border-bottom: 5px solid rgba(32, 32, 32, 0.1);
-
+  display: flex;
-}
+  flex-direction: column;
-#window #outer-box #scroll #inner-box #entry #img {
+  align-items: center;
-  margin-right: 0.5rem;
+  text-align: center;
+  transition: background-color var(--transition), transform var(--transition);
 }
 
-#window #outer-box #scroll #inner-box #entry:selected {
+#entry:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: scale(1.3);
+}
+
+#entry:selected {
   color: #fff;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--entry-selected);
-  outline: none;
+  border-bottom: 5px solid var(--search-border);
-  border-bottom: 5px solid rgba(214, 174, 0, 1);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-#row:hover {
+/* Icon inside entry */
-  background-color:  rgba(255, 255, 255, 0);
+#img {
-  outline: inherit;
+  margin-right: 0.5rem;
-}
+  width: 64px;
-#window #outer-box #scroll #inner-box #entry:hover {
+  height: 64px;
-  background-color: rgba(255, 255, 255, 0.1);
+  margin-bottom: 0.5rem;
-  outline: inherit;
 }
 
+/* Text below icon */
 #text {
   margin-top: 1rem;
   margin-bottom: 0;
+  font-size: 0.9rem;
+}
+
+/* Avoid hover highlight on rows outside entries */
+#row:hover {
+  background-color: transparent;
+  outline: inherit;
 }