From 675926a8b29c11b8228d1a49c8b3a6005ab1d4de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Mon, 14 Sep 2026 14:05:24 -0700
Subject: [PATCH] WidgetResouce: use card style for overlay, but make it glass

---
 data/stylesheet/_index.scss                   | 24 +++++--------------
 meson.build                                   |  2 +-
 .../WidgetResource/WidgetResource.vala        |  1 +
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss
index ab6fc664a..1ff1fc1b1 100644
--- a/data/stylesheet/_index.scss
+++ b/data/stylesheet/_index.scss
@@ -77,16 +77,9 @@ roundy-label:hover:selected {
 }
 
 .usage-label-container {
-    border-radius: 3px;
-    margin: 6px;
-
-    @if $color-scheme == "light" {
-        background-color: rgba($SILVER_100, 0.5);
-        border: 1px solid $SILVER_300;
-    } @else if $color-scheme == "dark" {
-        background-color: rgba($SILVER_900, 0.5);
-        border: 1px solid $SILVER_900;
-    }
+    backdrop-filter: blur(12px);
+    background-color: #{'color-mix(in srgb, @base_color 20%, transparent)'};
+    margin: 0.5rem;
 }
 
 .state_badge,
@@ -184,13 +177,8 @@ roundy-label:hover:selected {
 }
 
 .graph {
-    border-radius: 6px;
-
-    @if $color-scheme == "light" {
-        border: 1px $SILVER_300 solid;
-    } @else if $color-scheme == "dark" {
-        border: 1px $SILVER_900 solid;
-    }
+    border: 1px solid #{'@borders'};
+    border-radius: 0.75rem;
 }
 
 .open_files_list_box_wrapper {
@@ -229,4 +217,4 @@ roundy-label:hover:selected {
 
 .text-secondary {
     color: $SILVER_700;
-}
\ No newline at end of file
+}
diff --git a/meson.build b/meson.build
index b7f25bb03..9e29ed18f 100644
--- a/meson.build
+++ b/meson.build
@@ -29,7 +29,7 @@ add_project_arguments(vala_flags, language: 'vala')
 app_dependencies = [
     dependency('granite-7', version: '>=7.7.0'),
     dependency('glib-2.0'),
-    dependency('gtk4'),
+    dependency('gtk4', version: '>=4.20'),
     dependency('gee-0.8'),
     dependency('gio-2.0'),
     dependency('gobject-2.0'),
diff --git a/src/Widgets/WidgetResource/WidgetResource.vala b/src/Widgets/WidgetResource/WidgetResource.vala
index 6b21dfb9e..39ed97572 100644
--- a/src/Widgets/WidgetResource/WidgetResource.vala
+++ b/src/Widgets/WidgetResource/WidgetResource.vala
@@ -55,6 +55,7 @@ public class Monitor.WidgetResource : Gtk.Box {
             halign = START,
             valign = START
         };
+        info_box.add_css_class (Granite.CssClass.CARD);
         info_box.add_css_class ("usage-label-container");
         info_box.append (main_metric_box);