use proper css styling for the font colors

lan-mouse-gtk/resources/resources.gresource.xml

@@ -6,6 +6,7 @@
     <file compressed="true" preprocess="xml-stripblanks">fingerprint_window.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">client_row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">key_row.ui</file>
+    <file compressed="true">style.css</file>
   </gresource>
   <gresource prefix="/de/feschber/LanMouse/icons">
     <file compressed="true" preprocess="xml-stripblanks">de.feschber.LanMouse.svg</file>

lan-mouse-gtk/resources/style.css

@@ -0,0 +1,12 @@
+.peer-match > box > list .subtitle {
+    color: @success_color;
+}
+
+.peer-mismatch > box > list .subtitle {
+    font-weight: bold;
+    color: @warning_color;
+}
+
+.peer-unknown > box > list .subtitle {
+    color: @warning_color;
+}

lan-mouse-gtk/src/client_row.rs

@@ -174,16 +174,22 @@ impl ClientRow {
             .and_then(|co| co.property::<Option<String>>("peer-commit"));
         let local = crate::local_commit_str();
         let markup = match peer.as_deref() {
-            None => format!(
-                r##"<span foreground="#ffaa33">Peer version: unknown · Ours: {local}</span>"##
-            ),
+            None => format!("Peer version: unknown · Ours: {local}"),
             Some(p) if p == local.as_str() => {
-                format!(r##"<span foreground="#33cc66">Peer version: {p} · matched</span>"##)
+                format!("Peer version: {p} · matched")
             }
             Some(p) => {
-                format!(r##"<span foreground="#ffaa33">Peer version: {p} · Ours: {local}</span>"##)
+                format!("Peer version: {p} · Ours: {local}")
             }
         };
+        self.remove_css_class("peer-mismatch");
+        self.remove_css_class("peer-match");
+        self.remove_css_class("peer-unknown");
+        match peer.as_deref() {
+            Some(p) if p == local.as_str() => self.add_css_class("peer-match"),
+            Some(_) => self.add_css_class("peer-mismatch"),
+            None => self.add_css_class("peer-unknown"),
+        };
         self.set_subtitle(&markup);
     }
 }

lan-mouse-gtk/src/lib.rs

@@ -12,6 +12,7 @@ mod window;
 
 use std::{env, process, str, sync::OnceLock};
 
+use gtk::CssProvider;
 use window::Window;
 
 /// Local build's commit hash, set once by [`run`] before the GTK
@@ -85,6 +86,7 @@ fn gtk_main() -> glib::ExitCode {
         .build();
 
     app.connect_startup(|app| {
+        load_css();
         load_icons();
         setup_actions(app);
         setup_menu(app);
@@ -153,6 +155,16 @@ fn configure_macos_bundle_environment() {
     );
 }
 
+fn load_css() {
+    let provider = CssProvider::default();
+    provider.load_from_resource("de/feschber/LanMouse/style.css");
+    gtk::style_context_add_provider_for_display(
+        &Display::default().expect("Could not connect to a display"),
+        &provider,
+        gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
+    );
+}
+
 fn load_icons() {
     let display = &Display::default().expect("Could not connect to a display.");
     let icon_theme = IconTheme::for_display(display);