GNOME.org
 

[epiphany/wip/exalm/incognito-eye] Move incognito eye into a separate widget


commit 9da51412bc6fa1be83dcd73ba6c21735fecddeaa
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jul 30 23:55:30 2020 +0500

    Move incognito eye into a separate widget
    
    This allows it to be on the left for mobile and maybe reduces theme
    breakages, but who knows.

 src/ephy-header-bar.c                             | 10 ++++++++--
 src/resources/themes/Adwaita-dark.css             | 18 ++++++++++++++----
 src/resources/themes/Adwaita.css                  | 18 ++++++++++++++----
 src/resources/themes/HighContrast.css             | 18 ++++++++++++++----
 src/resources/themes/HighContrastInverse.css      | 18 ++++++++++++++----
 src/resources/themes/_Adwaita-base.scss           |  6 ++++--
 src/resources/themes/_Adwaita-colored-window.scss | 20 ++++++--------------
 src/resources/themes/_shared-base.scss            | 18 ++++++++++--------
 src/resources/themes/elementary.css               | 10 ++++++----
 src/resources/themes/elementary.scss              | 15 ++-------------
 src/resources/themes/shared.css                   |  6 +++++-
 11 files changed, 97 insertions(+), 60 deletions(-)
---
diff --git a/src/ephy-header-bar.c b/src/ephy-header-bar.c
index 4910864e0..04137c53e 100644
--- a/src/ephy-header-bar.c
+++ b/src/ephy-header-bar.c
@@ -171,6 +171,7 @@ ephy_header_bar_constructed (GObject *object)
   EphyHeaderBar *header_bar = EPHY_HEADER_BAR (object);
   GtkWidget *button;
   GtkWidget *page_menu_popover;
+  GtkWidget *event_box;
   GtkBuilder *builder;
   EphyEmbedShell *embed_shell;
   GtkSizeGroup *downloads_size_group;
@@ -207,13 +208,18 @@ ephy_header_bar_constructed (GObject *object)
     header_bar->title_widget = EPHY_TITLE_WIDGET (ephy_location_entry_new ());
   }
 
+  event_box = gtk_event_box_new ();
+  gtk_widget_show (event_box);
+  gtk_header_bar_set_custom_title (GTK_HEADER_BAR (header_bar), event_box);
+  gtk_widget_set_name (event_box, "title-box-container");
+
   if (is_desktop_pantheon ()) {
     /* Use a full-width entry on Pantheon */
     gtk_widget_set_hexpand (GTK_WIDGET (header_bar->title_widget), TRUE);
     gtk_widget_set_margin_start (GTK_WIDGET (header_bar->title_widget), 6);
     gtk_widget_set_margin_end (GTK_WIDGET (header_bar->title_widget), 6);
 
-    gtk_header_bar_set_custom_title (GTK_HEADER_BAR (header_bar), GTK_WIDGET (header_bar->title_widget));
+    gtk_container_add (GTK_CONTAINER (event_box), GTK_WIDGET (header_bar->title_widget));
   } else {
     GtkWidget *clamp;
 
@@ -224,7 +230,7 @@ ephy_header_bar_constructed (GObject *object)
     hdy_clamp_set_tightening_threshold (HDY_CLAMP (clamp), 560);
     gtk_container_add (GTK_CONTAINER (clamp), GTK_WIDGET (header_bar->title_widget));
 
-    gtk_header_bar_set_custom_title (GTK_HEADER_BAR (header_bar), clamp);
+    gtk_container_add (GTK_CONTAINER (event_box), clamp);
   }
 
   gtk_widget_show (GTK_WIDGET (header_bar->title_widget));
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index a138e5eda..8ec21d53e 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
 
@@ -74,9 +78,11 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode { /*************************** Check and Radio buttons * */ }
 
-.incognito-mode headerbar { background: #141927 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #1a2235, #1e263b); box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); 
border-color: #06080c; color: rgba(231, 234, 243, 0.2); }
+.incognito-mode headerbar { background: #141927 linear-gradient(to top, #1a2235, #1e263b); box-shadow: inset 
0 1px rgba(231, 234, 243, 0.07); border-color: #06080c; }
+
+.incognito-mode headerbar:backdrop { background-image: image(#252f49); border-color: #171d2e; box-shadow: 
inset 0 1px rgba(231, 234, 243, 0.07); }
 
-.incognito-mode headerbar:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)), image(#252f49); border-color: #171d2e; 
box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); }
+.incognito-mode headerbar #title-box-container { color: rgba(231, 234, 243, 0.2); }
 
 .incognito-mode actionbar { background: #252f49; }
 
@@ -144,10 +150,12 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode { /*************************** Check and Radio buttons * */ }
 
-.automation-mode headerbar { background: #e68700 linear-gradient(to top, #fa9300, #ff9805); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #bd6f00; color: rgba(255, 240, 219, 0.2); }
+.automation-mode headerbar { background: #e68700 linear-gradient(to top, #fa9300, #ff9805); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #bd6f00; }
 
 .automation-mode headerbar:backdrop { background-image: image(#ffa11a); border-color: #eb8c05; box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); }
 
+.automation-mode headerbar #title-box-container { color: rgba(255, 240, 219, 0.2); }
+
 .automation-mode actionbar { background: #ffa11a; }
 
 .automation-mode actionbar > revealer > box { border-color: #e68700; }
@@ -282,3 +290,5 @@ window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):checked:ho
 window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):backdrop:checked { border-color: 
#202020; background-color: #353535; }
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#1f76e1), 
to(transparent)); }
+
+#title-box-container { color: alpha(@theme_fg_color,0.2); }
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index 9ec13326a..7ea5923de 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
 
@@ -74,9 +78,11 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode { /*************************** Check and Radio buttons * */ }
 
-.incognito-mode headerbar { background: #c4d6e9 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #bdd1e6, #c8d9ea); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); 
border-color: #91b2d6; color: rgba(27, 49, 73, 0.2); }
+.incognito-mode headerbar { background: #c4d6e9 linear-gradient(to top, #bdd1e6, #c8d9ea); box-shadow: inset 
0 1px rgba(255, 255, 255, 0.8); border-color: #91b2d6; }
+
+.incognito-mode headerbar:backdrop { background-image: image(#eaf0f7); border-color: #b4cbe3; box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); }
 
-.incognito-mode headerbar:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)), image(#eaf0f7); border-color: #b4cbe3; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
+.incognito-mode headerbar #title-box-container { color: rgba(27, 49, 73, 0.2); }
 
 .incognito-mode actionbar { background: #eaf0f7; }
 
@@ -144,10 +150,12 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode { /*************************** Check and Radio buttons * */ }
 
-.automation-mode headerbar { background: #e68700 linear-gradient(to top, #db8100, #eb8a00); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: #9e5d00; color: rgba(100, 59, 0, 0.2); }
+.automation-mode headerbar { background: #e68700 linear-gradient(to top, #db8100, #eb8a00); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: #9e5d00; }
 
 .automation-mode headerbar:backdrop { background-image: image(#ffa11a); border-color: #ca7905; box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); }
 
+.automation-mode headerbar #title-box-container { color: rgba(100, 59, 0, 0.2); }
+
 .automation-mode actionbar { background: #ffa11a; }
 
 .automation-mode actionbar > revealer > box { border-color: #bd6f00; }
@@ -282,3 +290,5 @@ window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):checked:ho
 window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):backdrop:checked { border-color: 
#d5d0cc; background-color: #f6f5f4; }
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), 
to(transparent)); }
+
+#title-box-container { color: alpha(@theme_fg_color,0.2); }
diff --git a/src/resources/themes/HighContrast.css b/src/resources/themes/HighContrast.css
index d46eba1f2..3a985c985 100644
--- a/src/resources/themes/HighContrast.css
+++ b/src/resources/themes/HighContrast.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
 
@@ -74,9 +78,11 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode { /*************************** Check and Radio buttons * */ }
 
-.incognito-mode headerbar { background: #d0deed -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #c8d9ea, #d3e0ef); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); 
border-color: #345d8a; color: rgba(23, 42, 62, 0.2); }
+.incognito-mode headerbar { background: #d0deed linear-gradient(to top, #c8d9ea, #d3e0ef); box-shadow: inset 
0 1px rgba(255, 255, 255, 0.8); border-color: #345d8a; }
+
+.incognito-mode headerbar:backdrop { background-image: image(#f5f8fb); border-color: #b4cbe3; box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); }
 
-.incognito-mode headerbar:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)), image(#f5f8fb); border-color: #b4cbe3; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
+.incognito-mode headerbar #title-box-container { color: rgba(23, 42, 62, 0.2); }
 
 .incognito-mode actionbar { background: #f5f8fb; }
 
@@ -144,10 +150,12 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode { /*************************** Check and Radio buttons * */ }
 
-.automation-mode headerbar { background: #f59000 linear-gradient(to top, #eb8a00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: black; color: rgba(85, 50, 0, 0.2); }
+.automation-mode headerbar { background: #f59000 linear-gradient(to top, #eb8a00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: black; }
 
 .automation-mode headerbar:backdrop { background-image: image(#ffa729); border-color: #ca7905; box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); }
 
+.automation-mode headerbar #title-box-container { color: rgba(85, 50, 0, 0.2); }
+
 .automation-mode actionbar { background: #ffa729; }
 
 .automation-mode actionbar > revealer > box { border-color: #241500; }
@@ -280,3 +288,5 @@ window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):checked:ho
 window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):backdrop:checked { border-color: 
#d5d0cc; background-color: #f6f5f4; }
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), 
to(transparent)); }
+
+#title-box-container { color: alpha(@theme_fg_color,0.2); }
diff --git a/src/resources/themes/HighContrastInverse.css b/src/resources/themes/HighContrastInverse.css
index 2e64834b5..60091ff52 100644
--- a/src/resources/themes/HighContrastInverse.css
+++ b/src/resources/themes/HighContrastInverse.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
 
@@ -74,9 +78,11 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode { /*************************** Check and Radio buttons * */ }
 
-.incognito-mode headerbar { background: #101520 -gtk-icontheme("user-not-tracked-symbolic") 180px 0/64px 
64px no-repeat, linear-gradient(to top, #171d2e, #1a2235); box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); 
border-color: #36456b; color: rgba(238, 240, 246, 0.2); }
+.incognito-mode headerbar { background: #101520 linear-gradient(to top, #171d2e, #1a2235); box-shadow: inset 
0 1px rgba(231, 234, 243, 0.07); border-color: #36456b; }
+
+.incognito-mode headerbar:backdrop { background-image: image(#212b42); border-color: #171d2e; box-shadow: 
inset 0 1px rgba(231, 234, 243, 0.07); }
 
-.incognito-mode headerbar:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)), image(#212b42); border-color: #171d2e; 
box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); }
+.incognito-mode headerbar #title-box-container { color: rgba(238, 240, 246, 0.2); }
 
 .incognito-mode actionbar { background: #212b42; }
 
@@ -144,10 +150,12 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode { /*************************** Check and Radio buttons * */ }
 
-.automation-mode headerbar { background: #db8100 linear-gradient(to top, #f08d00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #ffb64d; color: rgba(255, 244, 229, 0.2); }
+.automation-mode headerbar { background: #db8100 linear-gradient(to top, #f08d00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #ffb64d; }
 
 .automation-mode headerbar:backdrop { background-image: image(#ff9c0f); border-color: #eb8c05; box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); }
 
+.automation-mode headerbar #title-box-container { color: rgba(255, 244, 229, 0.2); }
+
 .automation-mode actionbar { background: #ff9c0f; }
 
 .automation-mode actionbar > revealer > box { border-color: #ffcb80; }
@@ -280,3 +288,5 @@ window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):checked:ho
 window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page):backdrop:checked { border-color: 
#202020; background-color: #353535; }
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#1f76e1), 
to(transparent)); }
+
+#title-box-container { color: alpha(@theme_fg_color,0.2); }
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 4e5162a05..e21c78cdb 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -3,13 +3,11 @@
 
 .incognito-mode {
   $window_color: $incognito_color;
-  $window_icon: $incognito_icon;
   @import 'Adwaita-colored-window';
 }
 
 .automation-mode {
   $window_color: $automation_color;
-  $window_icon: '';
   @import 'Adwaita-colored-window';
 }
 
@@ -143,3 +141,7 @@ window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page) {
                                   to($_dot_color),
                                   to(transparent));
 }
+
+#title-box-container {
+  color: gtkalpha(themecolor(theme_fg_color), 0.2);
+}
diff --git a/src/resources/themes/_Adwaita-colored-window.scss 
b/src/resources/themes/_Adwaita-colored-window.scss
index d813839b7..1aadd4680 100644
--- a/src/resources/themes/_Adwaita-colored-window.scss
+++ b/src/resources/themes/_Adwaita-colored-window.scss
@@ -35,27 +35,19 @@ $backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color,
 @import 'drawing';
 
 headerbar {
-  @if $window_icon != '' {
-    @include headerbar_fill(darken($bg_color, 10%), $top_hilight, -gtk-icontheme($window_icon) 180px 0 / 
64px 64px no-repeat);
-  }
-  @else {
-    @include headerbar_fill(darken($bg_color, 10%));
-  }
+  @include headerbar_fill(darken($bg_color, 10%));
 
   border-color: $alt_borders_color;
-  color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
 
   &:backdrop {
-    @if $window_icon != '' {
-      background-image: cross-fade(50% -gtk-icontheme($window_icon), image(transparent)), image($bg_color);
-    }
-    @else {
-      background-image: image($bg_color);
-    }
-
+    background-image: image($bg_color);
     border-color: $backdrop_borders_color;
     box-shadow: inset 0 1px $top_hilight;
   }
+
+  #title-box-container {
+    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
+  }
 }
 
 actionbar {
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index f22a76c35..305bf328d 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -24,14 +24,16 @@
   }
 }
 
-// incognito mode
-.incognito-mode {
-  headerbar {
-    background-image: -gtk-icontheme($incognito_icon);
-    background-repeat: no-repeat;
-    background-position: 157px 0;
-    background-size: 64px 64px;
-    color: rgba(0, 0, 0, 0.35);
+#title-box-container {
+  color: gtkalpha(themecolor(theme_fg_color), 0.5);
+  transition: background 200ms ease-out;
+
+  .incognito-mode & {
+    background: -gtk-icontheme($incognito_icon) 16px 0 / 64px 64px no-repeat;
+
+    &:backdrop {
+      background-image: cross-fade(50% -gtk-icontheme($incognito_icon), image(transparent));
+    }
   }
 }
 
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index 6e9e8715c..1dc766a34 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
 
@@ -106,9 +110,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .floating-bar, .floating-bar label { color: #fff; text-shadow: 0 1px 2px alpha(#000,0.6); }
 
-.incognito-mode .titlebar { padding: 0; }
-
-.incognito-mode headerbar { padding: 8px 6px 6px; background-position: 100px; color: @text_shadow_color; }
+#title-box-container { color: @text_shadow_color; }
 
 .bookmark-tag-widget image { -gtk-icon-shadow: none; }
 
diff --git a/src/resources/themes/elementary.scss b/src/resources/themes/elementary.scss
index 80f66cf65..cf6f85fc1 100644
--- a/src/resources/themes/elementary.scss
+++ b/src/resources/themes/elementary.scss
@@ -101,19 +101,8 @@ dzlsuggestionpopover > revealer > box {
   }
 }
 
-.incognito-mode {
-  // Override padding on the titlebar stack...
-  .titlebar {
-    padding: 0;
-  }
-
-  headerbar {
-    // ...and instead apply it on the headerbar inside
-    padding: 8px 6px 6px;
-
-    background-position: 100px;
-    color: themecolor(text_shadow_color);
-  }
+#title-box-container {
+  color: themecolor(text_shadow_color);
 }
 
 .bookmark-tag-widget image {
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
index efa16bcdf..682b09964 100644
--- a/src/resources/themes/shared.css
+++ b/src/resources/themes/shared.css
@@ -6,7 +6,11 @@
 
 .floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; }
 
-.incognito-mode headerbar { background-image: -gtk-icontheme("user-not-tracked-symbolic"); 
background-repeat: no-repeat; background-position: 157px 0; background-size: 64px 64px; color: rgba(0, 0, 0, 
0.35); }
+#title-box-container { color: alpha(@theme_fg_color,0.5); transition: background 200ms ease-out; }
+
+.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 
64px no-repeat; }
+
+.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% 
-gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); }
 
 .automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]