From 74d4671c0adeee2849ea4def1cb3b1e29f8091b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 22 Feb 2024 13:44:14 -0800 Subject: [PATCH] Styles: Gtk4 prep --- data/Display.css | 158 +++++++++++++++++++++++++++---- src/Widgets/DisplayWidget.vala | 4 + src/Widgets/DisplaysOverlay.vala | 40 ++------ 3 files changed, 151 insertions(+), 51 deletions(-) diff --git a/data/Display.css b/data/Display.css index a316534f..6d4577ad 100644 --- a/data/Display.css +++ b/data/Display.css @@ -1,42 +1,160 @@ -/* For better dark style support */ -@define-color BG_COLOR_ALPHA alpha(@BG_COLOR, 0.75); - -.colored { - background-color: @BG_COLOR_ALPHA; - color: @TEXT_COLOR; +display-widget { + border-radius: 3px; text-shadow: 0 1px 1px alpha(white, 0.1); -gtk-icon-shadow: 0 1px 1px alpha(white, 0.1); -gtk-icon-palette: warning white; } -widget.colored { - border: 1px solid mix(@BG_COLOR_ALPHA, @TEXT_COLOR, 0.3); +display-widget > grid > label { + font-weight: 600; } -.colored button { - background: transparent; /* Fix stacking alpha on top of each other */ +display-widget button { border-radius: 50%; + color: inherit; padding: 6px; } -.colored button:focus { - background: alpha(@TEXT_COLOR, 0.25); -} - -.colored button:checked { - background: alpha(@TEXT_COLOR, 0.5); - border-color: transparent; +/*Clear icon palette*/ +display-widget image { + -gtk-icon-palette: sucess @text_color; } -.colored.disabled { +display-widget.disabled { background-color: @SLATE_100; color: @SLATE_700; } -.colored.disabled button:focus { +display-widget.disabled button:focus { background: alpha(@SLATE_700, 0.25); } -.colored.disabled button:checked { +display-widget.disabled button:checked { background: alpha(@SLATE_700, 0.5); } + +display-widget.color-0 { + background-color: alpha(@BLUEBERRY_100, 0.75); + border: 1px solid alpha(@BLUEBERRY_500, 0.75); + color: @BLUEBERRY_900; +} + +display-widget.color-0 button { + -gtk-icon-pallete: warning @BLUEBERRY_900; +} + +display-widget.color-0 button:focus { + background: @BLUEBERRY_300; +} + +display-widget.color-0 button:checked { + background: alpha(@BLUEBERRY_500, 0.75); +} + +display-widget.color-1 { + background-color: alpha(@STRAWBERRY_100, 0.75); + border: 1px solid alpha(@STRAWBERRY_500, 0.75); + color: @STRAWBERRY_900; +} + +display-widget.color-1 button { + -gtk-icon-pallete: warning @STRAWBERRY_900; +} + +display-widget.color-1 button:focus { + background: @STRAWBERRY_300; +} + +display-widget.color-1 button:checked { + background: alpha(@STRAWBERRY_500, 0.75); +} + +display-widget.color-2 { + background-color: alpha(@ORANGE_100, 0.75); + border: 1px solid alpha(@ORANGE_500, 0.75); + color: @ORANGE_900; +} + +display-widget.color-2 button { + -gtk-icon-pallete: warning @ORANGE_900; +} + +display-widget.color-2 button:focus { + background: @ORANGE_300; +} + +display-widget.color-2 button:checked { + background: alpha(@ORANGE_500, 0.75); +} + +display-widget.color-3 { + background-color: alpha(@BANANA_100, 0.75); + border: 1px solid alpha(@BANANA_500, 0.75); + color: @BANANA_900; +} + +display-widget.color-3 button { + -gtk-icon-pallete: warning @BANANA_900; +} + +display-widget.color-3 button:focus { + background: @BANANA_300; +} + +display-widget.color-3 button:checked { + background: alpha(@BANANA_500, 0.75); +} + +display-widget.color-4 { + background-color: alpha(@LIME_100, 0.75); + border: 1px solid alpha(@LIME_500, 0.75); + color: @LIME_900; +} + +display-widget.color-4 button { + -gtk-icon-pallete: warning @LIME_900; +} + +display-widget.color-4 button:focus { + background: @LIME_300; +} + +display-widget.color-4 button:checked { + background: alpha(@LIME_500, 0.75); +} + +display-widget.color-5 { + background-color: alpha(@GRAPE_100, 0.75); + border: 1px solid alpha(@GRAPE_500, 0.75); + color: @GRAPE_900; +} + +display-widget.color-5 button { + -gtk-icon-pallete: warning @GRAPE_900; +} + +display-widget.color-5 button:focus { + background: @GRAPE_300; +} + +display-widget.color-5 button:checked { + background: alpha(@GRAPE_500, 0.75); +} + +display-widget.color-6 { + background-color: alpha(@COCOA_100, 0.75); + border: 1px solid alpha(@COCOA_500, 0.75); + color: @COCOA_900; +} + +display-widget.color-6 button { + -gtk-icon-pallete: warning @COCOA_900; +} + +display-widget.color-6 button:focus { + background: @COCOA_300; +} + +display-widget.color-6 button:checked { + background: alpha(@COCOA_500, 0.75); +} diff --git a/src/Widgets/DisplayWidget.vala b/src/Widgets/DisplayWidget.vala index 5b8a5453..4cbda478 100644 --- a/src/Widgets/DisplayWidget.vala +++ b/src/Widgets/DisplayWidget.vala @@ -84,6 +84,10 @@ public class Display.DisplayWidget : Gtk.EventBox { ); } + class construct { + set_css_name ("display-widget"); + } + construct { virtual_monitor.get_current_mode_size (out real_width, out real_height); diff --git a/src/Widgets/DisplaysOverlay.vala b/src/Widgets/DisplaysOverlay.vala index de207a06..8ef00e60 100644 --- a/src/Widgets/DisplaysOverlay.vala +++ b/src/Widgets/DisplaysOverlay.vala @@ -50,8 +50,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay { } } - private static Gtk.CssProvider display_provider; - private static string[] colors = { "@BLUEBERRY_100", "@STRAWBERRY_100", @@ -71,11 +69,6 @@ public class Display.DisplaysOverlay : Gtk.Overlay { "@COCOA_900" }; - const string COLORED_STYLE_CSS = """ - @define-color BG_COLOR %s; - @define-color TEXT_COLOR %s; - """; - private Gtk.GestureDrag drag_gesture; construct { @@ -99,9 +92,15 @@ public class Display.DisplaysOverlay : Gtk.Overlay { } static construct { - display_provider = new Gtk.CssProvider (); + var display_provider = new Gtk.CssProvider (); display_provider.load_from_resource ("io/elementary/switchboard/display/Display.css"); + Gtk.StyleContext.add_provider_for_screen ( + Gdk.Screen.get_default (), + display_provider, + Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION + ); + GLib.Bus.get_proxy.begin ( GLib.BusType.SESSION, "org.pantheon.gala.daemon", @@ -322,32 +321,11 @@ public class Display.DisplaysOverlay : Gtk.Overlay { var color_number = (get_children ().length () - 2) % 7; var display_widget = new DisplayWidget (virtual_monitor, colors[color_number], text_colors[color_number]); + display_widget.get_style_context ().add_class ("color-%u".printf (color_number)); + add_overlay (display_widget); display_widgets.append (display_widget); - var provider = new Gtk.CssProvider (); - try { - var colored_css = COLORED_STYLE_CSS.printf (colors[color_number], text_colors[color_number]); - provider.load_from_data (colored_css, colored_css.length); - - var context = display_widget.get_style_context (); - context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_class ("colored"); - - context = display_widget.primary_image.get_style_context (); - context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_class ("colored"); - - context = display_widget.toggle_settings.get_style_context (); - context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_provider (display_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); - context.add_class ("colored"); - } catch (GLib.Error e) { - critical (e.message); - } - display_widget.show_all (); display_widget.set_as_primary.connect (() => set_as_primary (display_widget.virtual_monitor));