feat(window): use CSS variables

FineFindus · Sep 15, 2024 · 0886587 · 0886587
1 parent 6d78bb5
commit 0886587
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/data/resources/style.css b/data/resources/style.css
@@ -12,35 +12,32 @@
 }
 
 .shadow {
-  box-shadow: 5px 5px 5px @shade_color;
+  box-shadow: 5px 5px 5px var(--shade-color);
 }
 
+
 .hue-slider trough {
-    background: linear-gradient(90deg,
-        rgba(255,0,0,1) 0%,
-        rgba(255,255,0,1) 16.66%,
-        rgba(0,255,0,1) 33.33%,
-        rgba(0,255,255,1) 50%,
-        rgba(0,0,255,1) 66.66%,
-        rgba(255,0,255,1) 83.33%,
-        rgba(255,0,0,1) 100%
-    );
-    padding: 6px;
+  background: linear-gradient(90deg,
+      rgba(255, 0, 0, 1) 0%,
+      rgba(255, 255, 0, 1) 16.66%,
+      rgba(0, 255, 0, 1) 33.33%,
+      rgba(0, 255, 255, 1) 50%,
+      rgba(0, 0, 255, 1) 66.66%,
+      rgba(255, 0, 255, 1) 83.33%,
+      rgba(255, 0, 0, 1) 100%);
+  padding: 6px;
 }
 
 .saturation-slider trough {
-    background: linear-gradient(90deg,
-        rgba(255,255,255,1) 0%,
-        @saturation_color 100%
-    );
-    padding: 6px;
+  background: linear-gradient(90deg,
+      rgba(255, 255, 255, 1) 0%,
+      var(--saturation-color) 100%);
+  padding: 6px;
 }
 
 .value-slider trough {
-    background: linear-gradient(90deg,
-        rgba(0,0,0,1) 0%,
-        rgba(255,255,255,1) 100%
-    );
-    padding: 6px;
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(255, 255, 255, 1) 100%);
+  padding: 6px;
 }
-
diff --git a/src/window.rs b/src/window.rs
@@ -241,7 +241,7 @@ mod imp {
 
 glib::wrapper! {
     pub struct AppWindow(ObjectSubclass<imp::AppWindow>)
-        @extends gtk::Widget, gtk::Window,  gtk::ApplicationWindow,
+        @extends gtk::Widget, gtk::Window,  gtk::ApplicationWindow, adw::ApplicationWindow,
         @implements gio::ActionMap;
 }
 
@@ -539,10 +539,9 @@ impl AppWindow {
 
         if scale != *self.imp().saturation_scale {
             // update gradient of the saturation_scale
-            self.imp().css_provider.load_from_data(&format!(
-                "@define-color saturation_color {};",
-                gkd_color.to_string()
-            ));
+            self.imp()
+                .css_provider
+                .load_from_data(&format!(":root {{ --saturation-color: {}; }}", gkd_color));
         }
     }