[libhandy/wip/haecker-felix/flap-widget: 97/98] shadow

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libhandy/wip/haecker-felix/flap-widget: 97/98] shadow
Date: Mon, 3 Aug 2020 16:27:57 +0000 (UTC)

commit d5f908258b443f933d942d8ca2651c6894e83934
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Aug 2 17:03:59 2020 +0500

    shadow

 src/hdy-flap.c                     | 83 ++++++++++++++++++++++++++++++++++++++
 src/hdy-shadow-helper.c            |  3 --
 src/themes/Adwaita-dark.css        | 16 ++++----
 src/themes/Adwaita.css             | 16 ++++----
 src/themes/HighContrast.css        | 16 ++++----
 src/themes/HighContrastInverse.css | 16 ++++----
 src/themes/_fallback-base.scss     |  1 +
 src/themes/fallback.css            | 16 ++++----
 8 files changed, 124 insertions(+), 43 deletions(-)
---
diff --git a/src/hdy-flap.c b/src/hdy-flap.c
index d406643d..b90ea69f 100644
--- a/src/hdy-flap.c
+++ b/src/hdy-flap.c
@@ -11,6 +11,7 @@
 #include <math.h>
 
 #include "hdy-animation-private.h"
+#include "hdy-shadow-helper-private.h"
 
 /**
  * SECTION:hdy-flap
@@ -41,6 +42,8 @@ struct _HdyFlap
   gdouble reveal_progress;
 
   GtkOrientation orientation;
+
+  HdyShadowHelper *shadow_helper;
 };
 
 G_DEFINE_TYPE_WITH_CODE (HdyFlap, hdy_flap, GTK_TYPE_BIN,
@@ -158,6 +161,26 @@ hdy_flap_set_property (GObject      *object,
   }
 }
 
+static void
+hdy_flap_finalize (GObject *object)
+{
+  HdyFlap *self = HDY_FLAP (object);
+
+  if (self->overlay_tick_cb_id != 0) {
+    gtk_widget_remove_tick_callback (GTK_WIDGET (self), self->overlay_tick_cb_id);
+    self->overlay_tick_cb_id = 0;
+  }
+
+  if (self->reveal_tick_cb_id != 0) {
+    gtk_widget_remove_tick_callback (GTK_WIDGET (self), self->reveal_tick_cb_id);
+    self->overlay_tick_cb_id = 0;
+  }
+
+  g_clear_object (&self->shadow_helper);
+
+  G_OBJECT_CLASS (hdy_flap_parent_class)->finalize (object);
+}
+
 static gdouble
 ease_out_cubic (gdouble t) {
   gdouble p;
@@ -544,6 +567,59 @@ hdy_flap_get_preferred_height (GtkWidget *widget,
                      minimum, natural, NULL, NULL);
 }
 
+static gboolean
+hdy_flap_draw (GtkWidget *widget,
+               cairo_t   *cr)
+{
+  HdyFlap *self = HDY_FLAP (widget);
+  gint width, height;
+  gint shadow_x = 0, shadow_y = 0;
+  GtkPanDirection shadow_direction;
+
+  width = gtk_widget_get_allocated_width (widget);
+  height = gtk_widget_get_allocated_height (widget);
+
+  if (self->orientation == GTK_ORIENTATION_VERTICAL) {
+    gint flap_height = gtk_widget_get_allocated_height (self->flap);
+
+    if (self->flap_position == GTK_PACK_START) {
+      shadow_direction = GTK_PAN_DIRECTION_UP;
+      shadow_y = flap_height * self->reveal_progress;
+    } else {
+      shadow_direction = GTK_PAN_DIRECTION_DOWN;
+      shadow_y = -flap_height * self->reveal_progress;
+    }
+  } else {
+    gint flap_width = gtk_widget_get_allocated_width (self->flap);
+
+    if (self->flap_position == adjust_for_text_direction (self, GTK_PACK_START)) {
+      shadow_direction = GTK_PAN_DIRECTION_LEFT;
+      shadow_x = flap_width * self->reveal_progress;
+    } else {
+      shadow_direction = GTK_PAN_DIRECTION_RIGHT;
+      shadow_x = -flap_width * self->reveal_progress;
+    }
+  }
+
+  gtk_container_propagate_draw (GTK_CONTAINER (self),
+                                gtk_bin_get_child (GTK_BIN (self)),
+                                cr);
+
+  gtk_container_propagate_draw (GTK_CONTAINER (self),
+                                self->flap,
+                                cr);
+
+  cairo_save (cr);
+  cairo_translate (cr, shadow_x, shadow_y);
+  hdy_shadow_helper_draw_shadow (self->shadow_helper, cr,
+                                 width, height,
+                                 1 - MIN (self->reveal_progress, self->overlay_progress),
+                                 shadow_direction);
+  cairo_restore (cr);
+
+  return GDK_EVENT_PROPAGATE;
+}
+
 static void
 hdy_flap_forall (GtkContainer *container,
                  gboolean      include_internals,
@@ -589,12 +665,14 @@ hdy_flap_class_init (HdyFlapClass *klass)
 
   object_class->get_property = hdy_flap_get_property;
   object_class->set_property = hdy_flap_set_property;
+  object_class->finalize = hdy_flap_finalize;
 
   widget_class->get_preferred_width = hdy_flap_get_preferred_width;
   widget_class->get_preferred_width_for_height = hdy_flap_get_preferred_width_for_height;
   widget_class->get_preferred_height = hdy_flap_get_preferred_height;
   widget_class->get_preferred_height_for_width = hdy_flap_get_preferred_height_for_width;
   widget_class->size_allocate = hdy_flap_size_allocate;
+  widget_class->draw = hdy_flap_draw;
 
   container_class->remove = hdy_flap_remove;
   container_class->forall = hdy_flap_forall;
@@ -722,6 +800,8 @@ hdy_flap_init (HdyFlap *self)
   self->overlay_progress = 0;
   self->overlay_duration = 250;
   self->reveal_duration = 250;
+
+  self->shadow_helper = hdy_shadow_helper_new (GTK_WIDGET (self));
 }
 
 /**
@@ -859,6 +939,9 @@ hdy_flap_set_flap_position  (HdyFlap     *self,
 
   self->flap_position = flap_position;
 
+  gtk_widget_queue_allocate (GTK_WIDGET (self));
+  hdy_shadow_helper_clear_cache (self->shadow_helper);
+
   g_object_notify_by_pspec (G_OBJECT (self), props[PROP_FLAP_POSITION]);
 }
 
diff --git a/src/hdy-shadow-helper.c b/src/hdy-shadow-helper.c
index 929f04a3..59279676 100644
--- a/src/hdy-shadow-helper.c
+++ b/src/hdy-shadow-helper.c
@@ -336,9 +336,6 @@ hdy_shadow_helper_draw_shadow (HdyShadowHelper *self,
   gdouble remaining_distance, shadow_opacity;
   gint shadow_size, border_size, outline_size, distance;
 
-  if (progress <= 0 || progress >= 1)
-    return;
-
   cache_shadow (self, width, height, direction);
 
   shadow_size = self->shadow_size;
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 7fed6d0d..3bc1640b 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -23,21 +23,21 @@ row.expander:checked image.expander-row-arrow:not(:disabled) { color: #15539e; }
 
 row.expander image.expander-row-arrow:disabled { color: #919190; }
 
-deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.24); }
+flap > dimming, deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.24); }
 
-deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.2); }
+flap > border, deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 
0.2); }
 
-deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
+flap > shadow, deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
 
-deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 
0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.left, deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 
0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.right, deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to 
left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 
0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 
0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.up, deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 
0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.down, deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 
0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.05); }
+flap > outline, deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 
255, 255, 0.05); }
 
 avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 866817c6..70f7e208 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -23,21 +23,21 @@ row.expander:checked image.expander-row-arrow:not(:disabled) { color: #3584e4; }
 
 row.expander image.expander-row-arrow:disabled { color: #929595; }
 
-deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
+flap > dimming, deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
 
-deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
+flap > border, deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 
0.05); }
 
-deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
+flap > shadow, deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
 
-deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.left, deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 
0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), 
rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.right, deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to 
left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 
0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.up, deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.down, deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 
0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.2); }
+flap > outline, deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 
255, 255, 0.2); }
 
 avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 32f4a63b..5cb9c082 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -23,21 +23,21 @@ row.expander:checked image.expander-row-arrow:not(:disabled) { color: #1b6acb; }
 
 row.expander image.expander-row-arrow:disabled { color: #929495; }
 
-deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
+flap > dimming, deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
 
-deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: #877b6e; }
+flap > border, deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: #877b6e; }
 
-deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
+flap > shadow, deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
 
-deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.left, deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 
0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), 
rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.right, deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to 
left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 
0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.up, deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.down, deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 
0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: transparent; }
+flap > outline, deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: 
transparent; }
 
 avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index d7e0ecb7..6c5e2807 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -23,21 +23,21 @@ row.expander:checked image.expander-row-arrow:not(:disabled) { color: #0f3b71; }
 
 row.expander image.expander-row-arrow:disabled { color: #919191; }
 
-deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.24); }
+flap > dimming, deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.24); }
 
-deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: #686868; }
+flap > border, deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: #686868; }
 
-deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
+flap > shadow, deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
 
-deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 
0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.left, deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 
0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.right, deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to 
left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 
0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 
0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.up, deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 
0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), 
rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 
0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.down, deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, 
rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 
0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: transparent; }
+flap > outline, deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: 
transparent; }
 
 avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
 
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index f6831bcf..d692324e 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -69,6 +69,7 @@ row.expander {
 
 // Shadows
 
+flap,
 deck,
 leaflet {
   > dimming {
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 2231a6f4..1719e482 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -23,21 +23,21 @@ row.expander:checked image.expander-row-arrow:not(:disabled) { color: #3584e4; }
 
 row.expander image.expander-row-arrow:disabled { color: #929595; }
 
-deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
+flap > dimming, deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
 
-deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
+flap > border, deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 
0.05); }
 
-deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
+flap > shadow, deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
 
-deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.left, deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 
0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), 
rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.right, deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to 
left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 
0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 
0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.up, deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 
0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), 
rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 
0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+flap > shadow.down, deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, 
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 
0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
 
-deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.2); }
+flap > outline, deck > outline, leaflet > outline { min-width: 1px; min-height: 1px; background: rgba(255, 
255, 255, 0.2); }
 
 avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]