Merge pull request #168 from unsecretised/liquid-glass

Make rustcast into a frosted glass window

Author: unsecretised

src/app.rs

@@ -74,7 +74,7 @@ pub fn default_settings() -> Settings {
         minimizable: false,
         level: window::Level::AlwaysOnTop,
         transparent: true,
-        blur: false,
+        blur: true,
         size: iced::Size {
             width: WINDOW_WIDTH,
             height: DEFAULT_WINDOW_HEIGHT,

src/app/pages/emoji.rs

@@ -1,6 +1,11 @@
 use iced::{Border, Length::Fill, border::Radius, widget::tooltip};
 
-use crate::{app::pages::prelude::*, clipboard::ClipBoardContentType, commands::Function};
+use crate::{
+    app::pages::prelude::*,
+    clipboard::ClipBoardContentType,
+    commands::Function,
+    styles::{glass_border, glass_surface, with_alpha},
+};
 
 pub fn emoji_page(
     tile_theme: Theme,
@@ -65,21 +70,25 @@ pub fn emoji_page(
     }
 
     let tile_theme_clone = tile_theme.clone();
-
     container(Column::from_vec(column).spacing(10))
-        .padding(5)
-        .style(move |_| {
-            result_row_container_style(&tile_theme_clone, false)
-                .background({
-                    let mut clr = tile_theme_clone.bg_color();
-                    clr.a = 1.;
-                    Background::Color(tint(clr, 0.02))
-                })
-                .border(Border {
-                    color: tile_theme.bg_color(),
-                    width: 1.,
-                    radius: Radius::new(0),
-                })
+        .padding(10)
+        .style(move |_| container::Style {
+            background: Some(Background::Color(glass_surface(
+                tile_theme_clone.bg_color(),
+                false,
+            ))),
+            text_color: None,
+            border: Border {
+                color: glass_border(tile_theme_clone.text_color(1.0), false),
+                width: 0.5,
+                radius: Radius::new(14.0).top(0),
+            },
+            shadow: iced::Shadow {
+                color: with_alpha(iced::Color::TRANSPARENT, 0.),
+                offset: iced::Vector::new(0.0, 10.0),
+                blur_radius: 28.0,
+            },
+            snap: false,
         })
         .center_x(WINDOW_WIDTH)
         .into()

src/app/pages/prelude.rs

@@ -6,5 +6,5 @@ pub use iced::{
 pub use crate::{
     app::{Message, WINDOW_WIDTH, apps::App},
     config::Theme,
-    styles::{emoji_button_container_style, emoji_button_style, result_row_container_style, tint},
+    styles::{emoji_button_container_style, emoji_button_style, result_row_container_style},
 };

src/app/tile/elm.rs

@@ -17,7 +17,7 @@ use crate::app::DEFAULT_WINDOW_HEIGHT;
 use crate::app::pages::emoji::emoji_page;
 use crate::app::tile::{AppIndex, Hotkeys};
 use crate::config::Theme;
-use crate::styles::{contents_style, rustcast_text_input_style, tint, with_alpha};
+use crate::styles::{contents_style, glass_border, glass_surface, rustcast_text_input_style};
 use crate::{app::WINDOW_WIDTH, platform};
 use crate::{app::pages::clipboard::clipboard_view, platform::get_installed_apps};
 use crate::{
@@ -180,18 +180,24 @@ pub fn view(tile: &Tile, wid: window::Id) -> Element<'_, Message> {
 }
 
 fn footer(theme: Theme, results_count: usize) -> Element<'static, Message> {
-    let text = if results_count == 0 {
+    if results_count == 0 {
         return space().into();
-    } else if results_count == 1 {
-        "1 result found"
+    }
+
+    let text = if results_count == 1 {
+        "1 result found".to_string()
     } else {
-        &format!("{} results found", results_count)
+        format!("{results_count} results found")
     };
 
+    // “Liquid glass” parameters (match your other styles)
+    let focused = false;
+    let radius = 15.0;
+
     container(
         Row::new()
             .push(
-                Text::new(text.to_string())
+                Text::new(text)
                     .size(12)
                     .height(30)
                     .color(theme.text_color(0.7))
@@ -207,15 +213,16 @@ fn footer(theme: Theme, results_count: usize) -> Element<'static, Message> {
     .padding(5)
     .style(move |_| container::Style {
         text_color: None,
-        background: Some(iced::Background::Color(with_alpha(
-            tint(theme.bg_color(), 0.04),
-            1.0,
+        background: Some(iced::Background::Color(glass_surface(
+            theme.bg_color(),
+            focused,
         ))),
         border: iced::Border {
-            color: Color::WHITE,
-            width: 0.,
-            radius: Radius::new(15).top(0),
+            color: glass_border(theme.text_color(1.0), focused),
+            width: 1.0,
+            radius: Radius::new(radius).top(0.0),
         },
+
         shadow: iced::Shadow {
             color: Color::TRANSPARENT,
             offset: Vector::ZERO,

src/styles.rs

@@ -1,46 +1,39 @@
+use crate::config::Theme as ConfigTheme;
 use iced::border::Radius;
 use iced::widget::{button, container};
 use iced::{Background, Border, Color, widget::text_input};
-
-use crate::config::Theme as ConfigTheme;
-
 /// Helper: mix base color with white (simple “tint”)
 pub fn tint(mut c: Color, amount: f32) -> Color {
     c.r = c.r + (1.0 - c.r) * amount;
     c.g = c.g + (1.0 - c.g) * amount;
     c.b = c.b + (1.0 - c.b) * amount;
     c
 }
-
 /// Helper: apply alpha
 pub fn with_alpha(mut c: Color, a: f32) -> Color {
     c.a = a;
     c
 }
-
 pub fn rustcast_text_input_style(
     theme: &ConfigTheme,
     round_bottom_edges: bool,
 ) -> text_input::Style {
-    let base_bg = theme.bg_color();
-    let surface = with_alpha(tint(base_bg, 0.06), 1.0);
-
-    let border_color = theme.text_color(1.);
-
+    let base = theme.bg_color();
+    let focused = false; // if you have state, pass it in and use it
+    let surface = glass_surface(base, focused);
     text_input::Style {
         background: Background::Color(surface),
         border: Border {
-            color: border_color,
-            width: 1.,
+            color: glass_border(theme.text_color(1.0), focused),
+            width: 1.0,
             radius: Radius::new(15.).bottom(if round_bottom_edges { 15. } else { 0. }),
         },
-        icon: theme.text_color(0.7),
-        placeholder: theme.text_color(0.45),
+        icon: theme.text_color(0.75),
+        placeholder: theme.text_color(0.50),
         value: theme.text_color(1.0),
-        selection: theme.text_color(0.2),
+        selection: with_alpha(theme.text_color(1.0), 0.20),
     }
 }
-
 pub fn contents_style(theme: &ConfigTheme) -> container::Style {
     container::Style {
         background: None,
@@ -53,62 +46,62 @@ pub fn contents_style(theme: &ConfigTheme) -> container::Style {
         ..Default::default()
     }
 }
-
 pub fn result_button_style(theme: &ConfigTheme) -> button::Style {
     button::Style {
         text_color: theme.text_color(1.),
         background: Some(Background::Color(theme.bg_color())),
         ..Default::default()
     }
 }
-
 pub fn result_row_container_style(tile: &ConfigTheme, focused: bool) -> container::Style {
-    let base = tile.bg_color();
-    let row_bg = if focused {
-        with_alpha(tint(base, 0.10), 1.0)
-    } else {
-        with_alpha(tint(base, 0.04), 1.0)
-    };
-
     container::Style {
-        background: Some(Background::Color(row_bg)),
+        background: Some(Background::Color(glass_surface(tile.bg_color(), focused))),
         border: Border {
-            color: tile.text_color(1.),
-            width: 0.,
-            radius: Radius::new(0.),
+            color: glass_border(tile.text_color(1.), focused),
+            width: 1.,
+            radius: Radius::new(0.0),
         },
+        text_color: Some(tile.text_color(1.0)),
         ..Default::default()
     }
 }
-
 pub fn emoji_button_container_style(tile_theme: &ConfigTheme, focused: bool) -> container::Style {
-    let base = tile_theme.bg_color();
-    let row_bg = if focused {
-        with_alpha(tint(base, 0.10), 1.0)
-    } else {
-        with_alpha(tint(base, 0.04), 1.0)
-    };
     container::Style {
-        background: Some(Background::Color(row_bg)),
-        text_color: Some(tile_theme.text_color(1.)),
+        background: Some(Background::Color(glass_surface(
+            tile_theme.bg_color(),
+            focused,
+        ))),
+        text_color: Some(tile_theme.text_color(1.0)),
         border: Border {
-            color: tile_theme.text_color(0.8),
-            width: 0.,
-            radius: Radius::new(10),
+            color: glass_border(tile_theme.text_color(1.0), focused),
+            width: 1.0,
+            radius: Radius::new(10.0),
         },
         ..Default::default()
     }
 }
-
 pub fn emoji_button_style(tile_theme: &ConfigTheme) -> button::Style {
+    let base = tile_theme.bg_color();
+    let bg = with_alpha(tint(base, 0.10), 0.28);
     button::Style {
-        background: Some(Background::Color(tint(tile_theme.bg_color(), 0.02))),
-        text_color: tile_theme.text_color(1.),
+        background: Some(Background::Color(bg)),
+        text_color: tile_theme.text_color(1.0),
         border: Border {
-            color: tile_theme.text_color(0.8),
-            width: 0.1,
-            radius: Radius::new(10),
+            color: glass_border(tile_theme.text_color(1.0), false),
+            width: 1.0,
+            radius: Radius::new(10.0),
         },
         ..Default::default()
     }
 }
+
+pub fn glass_surface(base: Color, focused: bool) -> Color {
+    let t = if focused { 0.5 } else { 0.06 };
+    let a = if focused { 0.5 } else { 0.22 };
+    with_alpha(tint(base, t), a)
+}
+
+pub fn glass_border(base_text: Color, focused: bool) -> Color {
+    let a = if focused { 0.35 } else { 0.22 };
+    with_alpha(base_text, a)
+}