Create Application.css (#763)

elementary · Oct 11, 2024 · 10ac491 · 10ac491
1 parent d7e6704
commit 10ac491
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 99 deletions.
diff --git a/data/Application.css b/data/Application.css
@@ -0,0 +1,123 @@
+/*
+ * Copyright 2018-2023 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+.background {
+    opacity: 0;
+    transition: opacity 1s ease;
+}
+
+.background.initialized {
+    opacity: 1;
+}
+
+.date,
+.time {
+    color: #fff;
+}
+
+.date {
+    font-size: 2em;
+    font-weight: 600;
+    margin-top: -0.5em;
+    opacity: 0.9;
+    text-shadow:
+        0 1px 2px alpha(black, 0.4),
+        0 1px 3px alpha(black, 0.1);
+}
+
+.time {
+    font-feature-settings: "cv01";
+    font-size: 10em;
+    font-weight: 500;
+    letter-spacing: -0.05em;
+    text-shadow:
+        0 1px 2px alpha(black, 0.3),
+        0 3px 6px alpha(black, 0.15);
+}
+
+@keyframes shake {
+    0% { margin-left: -32px; margin-right: 32px; }
+    25% { margin-left: 32px; margin-right: -32px; }
+    50% { margin-left: -16px; margin-right: 16px; }
+    75% { margin-left: 16px; margin-right: -16px; }
+    100% { margin-left: 0; margin-right: 0;}
+}
+
+.rounded {
+    border-radius: 6px;
+}
+
+.shake {
+    animation: shake 0.4s ease-in-out 1;
+}
+
+.card.collapsed label.h2 {
+    font-size: 1.5em;
+}
+
+check {
+    border-radius: 99px;
+    color: white;
+    margin: 2px;
+    min-height: 20px;
+    min-width: 20px;
+    -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
+    -gtk-icon-transform: scale(0.6);
+}
+
+check.banana {
+    background-color: mix(@BANANA_500, @BANANA_700, 0.3);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@BANANA_500, @BANANA_700, 0.3), 0.7);
+}
+
+check.blueberry {
+    background-color: mix(@BLUEBERRY_300, @BLUEBERRY_500, 0.25);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@BLUEBERRY_300, @BLUEBERRY_500, 0.25), 0.3), 0.7);
+}
+
+check.bubblegum {
+    background-color: mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.25);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.25), 0.3), 0.7);
+}
+
+check.cocoa {
+    background-color: @COCOA_300;
+    -gtk-icon-shadow: 0 1px 1px shade(@COCOA_300, 0.3), 0.7);
+}
+
+check.grape {
+    background-color: mix(@GRAPE_300, @GRAPE_500, 0.5);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@GRAPE_300, @GRAPE_500, 0.5), 0.3), 0.7);
+}
+
+check.latte {
+    background-color: mix(@LATTE_300, @LATTE_500, 0.25);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@LATTE_300, @LATTE_500, 0.25), 0.3), 0.7);
+}
+
+check.lime {
+    background-color: mix(@LIME_300, @LIME_500, 0.25);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@LIME_300, @LIME_500, 0.25), 0.3), 0.7);
+}
+
+check.mint {
+    background-color: mix(@MINT_300, @MINT_500, 0.75);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@MINT_300, @MINT_500, 0.75), 0.3), 0.7);
+}
+
+check.orange {
+    background-color: mix(@ORANGE_300, @ORANGE_500, 0.5);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@ORANGE_300, @ORANGE_500, 0.5), 0.3), 0.7);
+}
+
+check.slate {
+    background-color: @SLATE_100;
+    -gtk-icon-shadow: 0 1px 1px shade(@SLATE_100, 0.3), 0.7);
+}
+
+check.strawberry {
+    background-color: mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.25);
+    -gtk-icon-shadow: 0 1px 1px shade(mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.25), 0.3), 0.7);
+}
diff --git a/data/Card.css b/data/Card.css
diff --git a/data/Check.css b/data/Check.css
diff --git a/data/DateTime.css b/data/DateTime.css
diff --git a/data/MainWindow.css b/data/MainWindow.css
diff --git a/data/greeter.gresource.xml b/data/greeter.gresource.xml
@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/greeter">
-    <file alias="Card.css" compressed="true">Card.css</file>
-    <file alias="Check.css" compressed="true">Check.css</file>
-    <file alias="DateTime.css" compressed="true">DateTime.css</file>
-    <file alias="MainWindow.css" compressed="true">MainWindow.css</file>
+    <file compressed="true">Application.css</file>
   </gresource>
   <gresource prefix="/io/elementary/greeter/icons">
     <file alias="/symbolic/fingerprint.svg" compressed="true">fingerprint.svg</file>

diff --git a/src/Application.vala b/src/Application.vala
@@ -34,6 +34,15 @@ public class Greeter.Application : Gtk.Application {
         Intl.bindtextdomain (Constants.GETTEXT_PACKAGE, Constants.LOCALE_DIR);
     }
 
+    protected override void startup () {
+        base.startup ();
+
+        var css_provider = new Gtk.CssProvider ();
+        css_provider.load_from_resource ("/io/elementary/greeter/Application.css");
+
+        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    }
+
     public override void activate () {
         add_window (new Greeter.MainWindow ());
         active_window.show_all ();

diff --git a/src/Cards/ManualCard.vala b/src/Cards/ManualCard.vala
@@ -71,7 +71,6 @@ public class Greeter.ManualCard : Greeter.BaseCard {
         unowned var main_grid_style_context = main_box.get_style_context ();
         main_grid_style_context.add_class (Granite.STYLE_CLASS_CARD);
         main_grid_style_context.add_class (Granite.STYLE_CLASS_ROUNDED);
-        main_grid_style_context.add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         child = main_box;
 

diff --git a/src/Cards/UserCard.vala b/src/Cards/UserCard.vala
@@ -32,7 +32,6 @@ public class Greeter.UserCard : Greeter.BaseCard {
 
     private SelectionCheck logged_in;
 
-    private unowned Gtk.StyleContext logged_in_context;
     private unowned Gtk.StyleContext main_box_style_context;
     private unowned Gtk.StyleContext password_entry_context;
 
@@ -55,7 +54,6 @@ public class Greeter.UserCard : Greeter.BaseCard {
 
         unowned var username_label_context = username_label.get_style_context ();
         username_label_context.add_class (Granite.STYLE_CLASS_H2_LABEL);
-        username_label_context.add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         password_entry = new Greeter.PasswordEntry ();
         password_entry_context = password_entry.get_style_context ();
@@ -164,7 +162,6 @@ public class Greeter.UserCard : Greeter.BaseCard {
         main_box_style_context = main_box.get_style_context ();
         main_box_style_context.add_class (Granite.STYLE_CLASS_CARD);
         main_box_style_context.add_class (Granite.STYLE_CLASS_ROUNDED);
-        main_box_style_context.add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         update_collapsed_class ();
 
@@ -188,8 +185,6 @@ public class Greeter.UserCard : Greeter.BaseCard {
             valign = END
         };
 
-        logged_in_context = logged_in.get_style_context ();
-
         if (lightdm_user.logged_in) {
             avatar_overlay.add_overlay (logged_in);
 
@@ -257,8 +252,7 @@ public class Greeter.UserCard : Greeter.BaseCard {
 
     private void set_check_style () {
         // Override check's accent_color so that it *always* uses user's preferred color
-        var style_provider = Gtk.CssProvider.get_named ("io.elementary.stylesheet." + accent_to_string (prefers_accent_color), null);
-        logged_in_context.add_provider (style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        logged_in.get_style_context ().add_class (accent_to_string (prefers_accent_color));
     }
 
     private void set_background_image () {
@@ -528,19 +522,8 @@ public class Greeter.UserCard : Greeter.BaseCard {
     }
 
     private class SelectionCheck : Gtk.Spinner {
-        private static Gtk.CssProvider check_provider;
-
         class construct {
             set_css_name (Gtk.STYLE_CLASS_CHECK);
         }
-
-        static construct {
-            check_provider = new Gtk.CssProvider ();
-            check_provider.load_from_resource ("/io/elementary/greeter/Check.css");
-        }
-
-        construct {
-            get_style_context ().add_provider (check_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
-        }
     }
 }
diff --git a/src/MainWindow.vala b/src/MainWindow.vala
@@ -20,8 +20,6 @@
  */
 
 public class Greeter.MainWindow : Gtk.ApplicationWindow {
-    protected static Gtk.CssProvider css_provider;
-
     private GLib.Queue<unowned Greeter.UserCard> user_cards;
     private Gtk.SizeGroup card_size_group;
     private Hdy.Carousel carousel;
@@ -48,16 +46,10 @@ public class Greeter.MainWindow : Gtk.ApplicationWindow {
         Gdk.Key.Tab
     };
 
-    static construct {
-        css_provider = new Gtk.CssProvider ();
-        css_provider.load_from_resource ("/io/elementary/greeter/MainWindow.css");
-    }
-
     construct {
         app_paintable = true;
         decorated = false;
         type_hint = Gdk.WindowTypeHint.DESKTOP;
-        get_style_context ().add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         settings = new Greeter.Settings ();
         create_session_selection_action ();

diff --git a/src/Widgets/DateTimeWidget.vala b/src/Widgets/DateTimeWidget.vala
@@ -13,11 +13,6 @@ public class Greeter.DateTimeWidget : Gtk.Box {
     private LoginManager login_manager;
 
     construct {
-        var css_provider = new Gtk.CssProvider ();
-        css_provider.load_from_resource ("/io/elementary/greeter/DateTime.css");
-
-        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-
         time_label = new Gtk.Label (null);
         time_label.get_style_context ().add_class ("time");