[epiphany/origin/wip/theme: 3/3] Theme tweaks

[Lapo Calamandrei <lapo src gnome org>]

commit f47a690027851b0026b95791c9bb5bb7830b2947
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Jun 12 15:48:02 2015 +0200

    Theme tweaks
    
    Make the icongnito theme more forced-dark-variant-friendly,
    update sass parsing script, add a bunch of comments in the scss.

 src/resources/epiphany.css  |   42 +++++++++++++++---------------------------
 src/resources/epiphany.scss |   20 ++++++++++----------
 src/resources/parse-sass.sh |    2 +-
 3 files changed, 26 insertions(+), 38 deletions(-)
---
diff --git a/src/resources/epiphany.css b/src/resources/epiphany.css
index 47123b5..7c513d8 100644
--- a/src/resources/epiphany.css
+++ b/src/resources/epiphany.css
@@ -2,7 +2,7 @@
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #a1a1a1;
-  background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
+  background-image: linear-gradient(to bottom, #d6d6d6, gainsboro 40%, #e0e0e0);
   text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
   box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; }
@@ -49,7 +49,7 @@
 .incognito-mode.titlebar {
   background-image: linear-gradient(to bottom, #d7dce2, #cbd2d9);
   box-shadow: inset 0 -1px #b4bec8, inset 0 1px #f1f3f5;
-  background-image: -gtk-icontheme("document-open-symbolic"), linear-gradient(to bottom, #d7dce2, #cbd2d9);
+  background-image: -gtk-icontheme("user-not-tracked-symbolic"), linear-gradient(to bottom, #d7dce2, 
#cbd2d9);
   background-size: 64px 64px, 100% 100%;
   background-position: 160px 0, 0 0;
   background-repeat: no-repeat, no-repeat;
@@ -58,11 +58,11 @@
   .incognito-mode.titlebar > * {
     color: #2e3436; }
     .incognito-mode.titlebar > *:backdrop {
-      color: #54595a; }
+      color: #8d9091; }
   .incognito-mode.titlebar:backdrop {
-    background-image: -gtk-icontheme("document-open-symbolic"), linear-gradient(to bottom, #cbd2d9);
+    background-image: -gtk-icontheme("user-not-tracked-symbolic"), linear-gradient(to bottom, #cbd2d9);
     box-shadow: inset 0 1px #f1f3f5;
-    color: rgba(84, 89, 90, 0.1); }
+    color: rgba(141, 144, 145, 0.1); }
   .incognito-mode.titlebar .button {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
@@ -93,7 +93,7 @@
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #8192a3;
-      background-image: linear-gradient(to bottom, #b0bbc6, #bcc5ce);
+      background-image: linear-gradient(to bottom, #b0bbc6, #b8c1cb 40%, #bcc5ce);
       text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px #f1f3f5; }
@@ -104,10 +104,10 @@
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px #f1f3f5; }
-      .incognito-mode.titlebar .button:insensitive > GtkLabel {
+      .incognito-mode.titlebar .button:insensitive > .label {
         color: inherit; }
     .incognito-mode.titlebar .button:backdrop {
-      color: #54595a;
+      color: #8d9091;
       border-color: #cbd2d9;
       background-image: linear-gradient(to bottom, #cbd2d9);
       text-shadow: none;
@@ -115,7 +115,7 @@
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(241, 243, 245, 0);
       border-color: #8192a3; }
       .incognito-mode.titlebar .button:backdrop:active {
-        color: #54595a;
+        color: #8d9091;
         border-color: #aeb8c3;
         background-image: linear-gradient(to bottom, #aeb8c3);
         box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(241, 243, 245, 0);
@@ -128,7 +128,7 @@
         icon-shadow: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(241, 243, 245, 0);
         border-color: #8192a3; }
-        .incognito-mode.titlebar .button:backdrop:insensitive > GtkLabel {
+        .incognito-mode.titlebar .button:backdrop:insensitive > .label {
           color: inherit; }
     .incognito-mode.titlebar .button.flat:backdrop, .incognito-mode.titlebar .button.titlebutton:backdrop {
       border-color: transparent;
@@ -138,22 +138,10 @@
       text-shadow: none;
       icon-shadow: none; }
   .incognito-mode.titlebar .entry {
-    background-color: transparent;
-    background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
-    border-color: #a1a1a1;
-    box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 
0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px #f1f3f5; }
+    box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px #f1f3f5;
+    border-color: #8192a3; }
     .incognito-mode.titlebar .entry:focus {
-      background-color: transparent;
-      background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
-      box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 
0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px #f1f3f5;
-      border-color: #4a90d9; }
-    .incognito-mode.titlebar .entry:selected {
-      color: @theme_selected_fg_color;
-      background-color: @theme_selected_bg_color; }
+      border-color: #4a90d9;
+      box-shadow: inset 0 0 0 1px #4a90d9, 0 1px #f1f3f5; }
     .incognito-mode.titlebar .entry:backdrop {
-      background-color: transparent;
-      background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
-      color: #54595a;
-      border-color: #a8a8a8;
-      background-image: linear-gradient(to bottom, #fcfcfc);
-      box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(241, 
243, 245, 0); }
+      box-shadow: none; }
diff --git a/src/resources/epiphany.scss b/src/resources/epiphany.scss
index 15d834e..e77c4b7 100644
--- a/src/resources/epiphany.scss
+++ b/src/resources/epiphany.scss
@@ -75,7 +75,7 @@ $variant: 'light';
 
 //$incognito_color: #c5cfd8;
 $incognito_color: #cbd2d9;
-$incognito_icon: 'document-open-symbolic';
+$incognito_icon: 'user-not-tracked-symbolic';
 $edge_color: lighten($incognito_color, 13%);
 
 .incognito-mode {
@@ -87,7 +87,7 @@ $edge_color: lighten($incognito_color, 13%);
     background-position: 160px 0, 0 0;
     background-repeat: no-repeat, no-repeat;
     border-color: _border_color($incognito_color);
-    color: transparentize($fg_color, 0.8);
+    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon
     > * {
       color: $fg_color;
       &:backdrop { color: $backdrop_fg_color }
@@ -96,9 +96,9 @@ $edge_color: lighten($incognito_color, 13%);
       background-image: -gtk-icontheme($incognito_icon),
                           linear-gradient(to bottom, $incognito_color);
       box-shadow: inset 0 1px $edge_color;
-      color: transparentize($backdrop_fg_color, 0.9);
+      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
     }
-    .button {
+    .button { // changing the headerbar background color requires changing widget borders and shadow 
accordingly
       @include button(normal, $incognito_color, $edge:$edge_color);
       &.flat, &.titlebutton { @include button(undecorated); }
       &.titlebutton {
@@ -126,13 +126,13 @@ $edge_color: lighten($incognito_color, 13%);
       &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
     }
     .entry {
-      @include entry(normal, $edge:$edge_color);
-      &:focus { @include entry(focus, $edge:$edge_color); }
-      &:selected {
-        color: themecolor(theme_selected_fg_color);
-        background-color: themecolor(theme_selected_bg_color);
+      box-shadow: entry_focus_shadow(transparentize($selected_bg_color, 1)), _widget_edge($edge_color);
+      border-color: _border_color($incognito_color);
+      &:focus {
+        border-color: entry_focus_border($selected_bg_color);
+        box-shadow: entry_focus_shadow($selected_bg_color), _widget_edge($edge_color);
       }
-      &:backdrop { @include entry(backdrop, $edge:$edge_color); }
+      &:backdrop { box-shadow: none; }
     }
   }
 }
diff --git a/src/resources/parse-sass.sh b/src/resources/parse-sass.sh
index 3cbe160..04f67d6 100755
--- a/src/resources/parse-sass.sh
+++ b/src/resources/parse-sass.sh
@@ -2,4 +2,4 @@
 
 GTK_SOURCE_PATH="../../../gtk+"
 
-sass --sourcemap=none --update -I ${GTK_SOURCE_PATH}/gtk/resources/theme/Adwaita .
+sass --sourcemap=none --update -I ${GTK_SOURCE_PATH}/gtk/theme/Adwaita .