diff --git a/README.md b/README.md index d55834d..0442785 100644 --- a/README.md +++ b/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 diff --git a/examples/images/hyprland-exit.png b/examples/images/hyprland-exit.png index cf4c3ed..898acc2 100644 Binary files a/examples/images/hyprland-exit.png and b/examples/images/hyprland-exit.png differ diff --git a/examples/images/hyprland-switch.png b/examples/images/hyprland-switch.png index 7aa091c..db264b5 100644 Binary files a/examples/images/hyprland-switch.png and b/examples/images/hyprland-switch.png differ diff --git a/examples/images/worf-rtw.png b/examples/images/worf-rtw.png index 95c1e54..ac66167 100644 Binary files a/examples/images/worf-rtw.png and b/examples/images/worf-rtw.png differ diff --git a/examples/images/worf-warden.png b/examples/images/worf-warden.png index 75d2b04..534dfc0 100644 Binary files a/examples/images/worf-warden.png and b/examples/images/worf-warden.png differ diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..c29b885 Binary files /dev/null and b/images/background.jpg differ diff --git a/styles/AmberNight/example.png b/styles/AmberNight/example.png new file mode 100644 index 0000000..5006cd0 Binary files /dev/null and b/styles/AmberNight/example.png differ diff --git a/styles/DarkBlue/config.toml b/styles/DarkBlue/config.toml new file mode 100644 index 0000000..4a3624d --- /dev/null +++ b/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 diff --git a/styles/DarkBlue/example.png b/styles/DarkBlue/example.png new file mode 100644 index 0000000..942f160 Binary files /dev/null and b/styles/DarkBlue/example.png differ diff --git a/styles/DarkBlue/style.css b/styles/DarkBlue/style.css new file mode 100644 index 0000000..2184a54 --- /dev/null +++ b/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; +} diff --git a/styles/GlacierPrism/example.png b/styles/GlacierPrism/example.png new file mode 100644 index 0000000..10fec46 Binary files /dev/null and b/styles/GlacierPrism/example.png differ diff --git a/styles/IndigoEdge/example.png b/styles/IndigoEdge/example.png new file mode 100644 index 0000000..709920b Binary files /dev/null and b/styles/IndigoEdge/example.png differ diff --git a/styles/compact/example.png b/styles/compact/example.png index 18862dd..10a03b4 100644 Binary files a/styles/compact/example.png and b/styles/compact/example.png differ diff --git a/styles/dmenu/example.png b/styles/dmenu/example.png new file mode 100644 index 0000000..9fc4536 Binary files /dev/null and b/styles/dmenu/example.png differ diff --git a/styles/emoji/config b/styles/emoji/config.toml similarity index 100% rename from styles/emoji/config rename to styles/emoji/config.toml diff --git a/styles/emoji/example.png b/styles/emoji/example.png new file mode 100644 index 0000000..d89e5eb Binary files /dev/null and b/styles/emoji/example.png differ diff --git a/styles/launcher/example.png b/styles/launcher/example.png new file mode 100644 index 0000000..1118e37 Binary files /dev/null and b/styles/launcher/example.png differ diff --git a/styles/math/example.png b/styles/math/example.png new file mode 100644 index 0000000..42a01be Binary files /dev/null and b/styles/math/example.png differ diff --git a/styles/relaxed/example.png b/styles/relaxed/example.png index 49683a9..f338bc5 100644 Binary files a/styles/relaxed/example.png and b/styles/relaxed/example.png differ