diff --git a/styles/AmberNight/config.toml b/styles/AmberNight/config.toml new file mode 100644 index 0000000..caafaf7 --- /dev/null +++ b/styles/AmberNight/config.toml @@ -0,0 +1,5 @@ +image_size=28 +allow_images=true +term="kitty -e" +insensitive=true +key_detection_type="Code" diff --git a/styles/AmberNight/style.css b/styles/AmberNight/style.css new file mode 100644 index 0000000..de538da --- /dev/null +++ b/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; +} diff --git a/styles/GlacierPrism/config.toml b/styles/GlacierPrism/config.toml new file mode 100644 index 0000000..caafaf7 --- /dev/null +++ b/styles/GlacierPrism/config.toml @@ -0,0 +1,5 @@ +image_size=28 +allow_images=true +term="kitty -e" +insensitive=true +key_detection_type="Code" diff --git a/styles/GlacierPrism/style.css b/styles/GlacierPrism/style.css new file mode 100644 index 0000000..b05e40b --- /dev/null +++ b/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; +} diff --git a/styles/IndigoEdge/config.toml b/styles/IndigoEdge/config.toml new file mode 100644 index 0000000..789f742 --- /dev/null +++ b/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 diff --git a/styles/IndigoEdge/style.css b/styles/IndigoEdge/style.css new file mode 100644 index 0000000..577112b --- /dev/null +++ b/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; +} diff --git a/styles/compact/config.toml b/styles/compact/config.toml new file mode 100644 index 0000000..e781342 --- /dev/null +++ b/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 + diff --git a/styles/fullscreen/config.toml b/styles/fullscreen/config.toml deleted file mode 100644 index c7c3564..0000000 --- a/styles/fullscreen/config.toml +++ /dev/null @@ -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" diff --git a/styles/fullscreen/example.png b/styles/fullscreen/example.png deleted file mode 100644 index cec24a7..0000000 Binary files a/styles/fullscreen/example.png and /dev/null differ diff --git a/styles/fullscreen/style.css b/styles/fullscreen/style.css deleted file mode 100644 index 7b782d3..0000000 --- a/styles/fullscreen/style.css +++ /dev/null @@ -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; -} diff --git a/styles/launcher/config.toml b/styles/launcher/config.toml index 9086a0d..ce59c4c 100644 --- a/styles/launcher/config.toml +++ b/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%" -width="60%" +height="105%" +width="100%" valign="Start" -blurred_background=true +blurred_background=false line_max_chars=32 +key_detection_type="Code" +term="kitty -e" diff --git a/styles/launcher/style.css b/styles/launcher/style.css index 4ad617f..def5974 100644 --- a/styles/launcher/style.css +++ b/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 */ - border-radius: 0; + background-color: rgba(33, 33, 33, 0.1); /* #212121BB */ + 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 { - /* The name of the search bar */ - /* The name of the scrolled window containing all of the entries */ - border: 2px solid rgba(63, 81, 181, 1); - border-radius: 6px; +/* Outer-box is the app container grid */ +#outer-box { + border-radius: 60px; + display: grid; + 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 { - background-color: rgba(32, 32, 32, 0.6); - color: #f2f2f2; - border-bottom: 2px solid rgba(214, 174, 0, 1); +/* Search input styling */ +#input { + background-color: var(--search-bg); + 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); - color: #f2f2f2; + background-color: var(--search-bg); + 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); - -} -#window #outer-box #scroll #inner-box #entry #img { - margin-right: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + 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); - outline: none; - border-bottom: 5px solid rgba(214, 174, 0, 1); + background-color: var(--entry-selected); + border-bottom: 5px solid var(--search-border); 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; +/* Icon inside entry */ +#img { + margin-right: 0.5rem; + width: 64px; + height: 64px; + margin-bottom: 0.5rem; } +/* 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; }