GNOME.org
 

[epiphany/wip/theme: 2/2] Theme fixes for Epiphany 3.14

commit 9bb83927781cb104e54374a0e974eb0b75849c9d
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Sep 13 16:32:22 2014 +0200

    Theme fixes for Epiphany 3.14
    
    https://bugzilla.gnome.org/show_bug.cgi?id=734119

 lib/widgets/ephy-download-widget.c |    5 +
 src/ephy-window.c                  |    3 +-
 src/resources/epiphany.css         |  221 ++++++++++++++++++++++++-----------
 src/resources/epiphany.scss        |  138 ++++++++++++++++++++++
 src/resources/parse-sass.sh        |    5 +
 5 files changed, 301 insertions(+), 71 deletions(-)
---
diff --git a/lib/widgets/ephy-download-widget.c b/lib/widgets/ephy-download-widget.c
index 23ea82a..ae97d7f 100644
--- a/lib/widgets/ephy-download-widget.c
+++ b/lib/widgets/ephy-download-widget.c
@@ -591,6 +591,7 @@ create_widget (EphyDownloadWidget *widget)
   smallify_label (GTK_LABEL (text));
   gtk_misc_set_alignment (GTK_MISC (text), 0, 0.5);
   gtk_label_set_ellipsize (GTK_LABEL (text), PANGO_ELLIPSIZE_END);
+  gtk_style_context_add_class (gtk_widget_get_style_context (text), "filename");
 
   remain = gtk_label_new (_("Starting…"));
   smallify_label (GTK_LABEL (remain));
@@ -637,6 +638,10 @@ ephy_download_widget_init (EphyDownloadWidget *self)
                                   GTK_ORIENTATION_HORIZONTAL);
   context = gtk_widget_get_style_context (GTK_WIDGET (self));
   gtk_style_context_add_class (context, GTK_STYLE_CLASS_LINKED);
+
+  g_object_set (self,
+                "margin", 2,
+                NULL);
 }
 
 /**
diff --git a/src/ephy-window.c b/src/ephy-window.c
index bc77c5b..7d60661 100644
--- a/src/ephy-window.c
+++ b/src/ephy-window.c
@@ -2999,12 +2999,13 @@ setup_downloads_box (EphyWindow *window)
        GtkWidget *close_button;
        GtkWidget *image;
 
-       widget = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
+       widget = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 2);
        close_button = gtk_button_new ();
        gtk_container_set_border_width (GTK_CONTAINER (close_button), 6);
        gtk_widget_set_valign (close_button, GTK_ALIGN_CENTER);
        gtk_style_context_add_class (gtk_widget_get_style_context (close_button), "image-button");
        gtk_style_context_add_class (gtk_widget_get_style_context (close_button), "close");
+       gtk_style_context_add_class (gtk_widget_get_style_context (widget), "download-box");
 
        gtk_button_set_relief (GTK_BUTTON (close_button), GTK_RELIEF_NONE);
 
diff --git a/src/resources/epiphany.css b/src/resources/epiphany.css
index 3651634..5bae38d 100644
--- a/src/resources/epiphany.css
+++ b/src/resources/epiphany.css
@@ -1,78 +1,159 @@
-#ephy-status-frame {
-  border-style: solid;
-  border-width: 1px;
-  padding: 4px;
-}
-
-#ephy-tab-close-button {
-  -GtkButton-default-border: 0;
-  -GtkButton-default-outside-border: 0;
-  -GtkButton-inner-border: 0;
-  -GtkWidget-focus-padding: 0;
-  -GtkWidget-focus-line-width: 0;
-  margin: 0;
-  padding: 0;
-}
-
-.primary-toolbar.toolbar {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-#fullscreen-popup {
-    background-color: alpha (black, 0.7);
-    color: white;
-    padding: 12px;
-    border-radius: 10px;
-}
-
-EphyToolbar.incognito-mode {
-    background-color: transparent;
-    background-image: url("resource://org/gnome/epiphany/incognito-tinted.png"),
-                      linear-gradient(to bottom,
-                                      #e4ecf5,
-                                      #c5cfd8);
-    background-repeat: no-repeat;
-    background-position: 6ex center, 0 0;
-    background-size: auto 180%;
-    border-color: shade(#c5cfd8, 0.90);
-    box-shadow: none;
-}
-
-EphyToolbar.incognito-mode *:insensitive {
-    background-color: transparent;
-}
-
-EphyToolbar.incognito-mode EphyMiddleClickableButton,
-EphyToolbar.incognito-mode > .button {
-    background-image: linear-gradient(to bottom,
-                                      #e4ecf5,
-                                      #c5cfd8);
-    border-color: shade(#c5cfd8, 0.90);
-}
-
-EphyTitleBox {
-    -GtkWidget-window-dragging: true;
-}
+.button.active-menu {
+  color: #2e3436;
+  outline-color: rgba(46, 52, 54, 0.3);
+  border-color: #a1a1a1;
+  background-image: linear-gradient(to bottom, #d6d6d6, #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; }
 
 .floating-bar {
   background-color: @theme_base_color;
   border-width: 1px;
   border-style: solid solid none;
   border-color: @borders;
-  border-radius: 3px 3px 0 0;
-}
+  border-radius: 3px 3px 0 0; }
+  .floating-bar.left {
+    border-left-style: none;
+    border-top-left-radius: 0; }
+  .floating-bar.right {
+    border-right-style: none;
+    border-top-right-radius: 0; }
+  .floating-bar:backdrop {
+    background-color: @theme_unfocused_base_color;
+    border-color: @unfocused_borders; }
 
-.floating-bar.left { /* axes left border and border radius */
-  border-left-style: none;
-  border-top-left-radius: 0;
-}
-.floating-bar.right { /* axes right border and border radius */
-  border-right-style: none;
-  border-top-right-radius: 0;
-}
+.download-box {
+  border-style: solid none none;
+  border-width: 1px;
+  border-color: @borders; }
+  .download-box:backdrop {
+    border-color: @unfocused_borders; }
 
-.floating-bar:backdrop {
-  background-color: @theme_unfocused_base_color;
-  border-color: @unfocused_borders;
-}
+.download-box .button .filename:dir(ltr) {
+  padding-right: 6px; }
+.download-box .button .filename:dir(rtl) {
+  padding-left: 6px; }
+
+.download-box .button.needs-attention .filename {
+  animation: needs_attention 150ms ease-in;
+  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 
0.76923)), to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 4px; }
+  .download-box .button.needs-attention .filename:dir(rtl) {
+    background-position: left 3px, left 4px; }
+  .download-box .button.needs-attention .filename:backdrop {
+    background-size: 6px 6px, 0 0; }
+
+.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("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;
+  border-color: #8192a3;
+  color: rgba(46, 52, 54, 0.2); }
+  .incognito-mode.titlebar > * {
+    color: #2e3436; }
+    .incognito-mode.titlebar > *:backdrop {
+      color: #54595a; }
+  .incognito-mode.titlebar:backdrop {
+    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); }
+  .incognito-mode.titlebar .button {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
+    border-color: #8192a3;
+    background-image: linear-gradient(to bottom, #dadfe4, #cbd2d9 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(255, 255, 255, 0.7), 0 1px #f1f3f5; }
+    .incognito-mode.titlebar .button.flat, .incognito-mode.titlebar .button.titlebutton {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none; }
+    .incognito-mode.titlebar .button.titlebutton {
+      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
+    .incognito-mode.titlebar .button:hover {
+      color: #2e3436;
+      outline-color: rgba(46, 52, 54, 0.3);
+      border-color: #8192a3;
+      background-image: linear-gradient(to bottom, #f4f6f7, #d7dce2 40%, #cbd2d9);
+      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(255, 255, 255, 0.7), 0 1px #f1f3f5; }
+    .incognito-mode.titlebar .button:active, .incognito-mode.titlebar .button:checked, 
.incognito-mode.titlebar .button#ephy-page-menu-button.active-menu {
+      color: #2e3436;
+      outline-color: rgba(46, 52, 54, 0.3);
+      border-color: #8192a3;
+      background-image: linear-gradient(to bottom, #b0bbc6, #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; }
+    .incognito-mode.titlebar .button:insensitive {
+      color: #8d9091;
+      border-color: #8192a3;
+      background-image: linear-gradient(to bottom, #d2d8de);
+      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 {
+        color: inherit; }
+    .incognito-mode.titlebar .button:backdrop {
+      color: #54595a;
+      border-color: #cbd2d9;
+      background-image: linear-gradient(to bottom, #cbd2d9);
+      text-shadow: none;
+      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:active {
+        color: #54595a;
+        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);
+        border-color: #8192a3; }
+      .incognito-mode.titlebar .button:backdrop:insensitive {
+        color: #989ea3;
+        border-color: #d2d8de;
+        background-image: linear-gradient(to bottom, #d2d8de);
+        text-shadow: none;
+        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 {
+          color: inherit; }
+    .incognito-mode.titlebar .button.flat:backdrop, .incognito-mode.titlebar .button.titlebutton:backdrop {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      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; }
+    .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; }
+    .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); }
diff --git a/src/resources/epiphany.scss b/src/resources/epiphany.scss
new file mode 100644
index 0000000..935b203
--- /dev/null
+++ b/src/resources/epiphany.scss
@@ -0,0 +1,138 @@
+ function themecolor($s) {
+  @return unquote("@" + "#{$s}");
+}
+
+$variant: 'light';
+
+ import 'colors';
+ import 'drawing';
+
+// menu button fix, yeah this is ugly
+
+.button.active-menu {
+  @include button(active);
+  &:backdrop { @include button(active-backdrop); }
+}
+
+// floating status bar
+.floating-bar {
+  background-color: themecolor(theme_base_color);
+  border-width: 1px;
+  border-style: solid solid none;
+  border-color: themecolor(borders);
+  border-radius: 3px 3px 0 0;
+  &.left {
+    border-left-style: none;
+    border-top-left-radius: 0;
+  }
+  &.right {
+    border-right-style: none;
+    border-top-right-radius: 0;
+  }
+  &:backdrop {
+    background-color: themecolor(theme_unfocused_base_color);
+    border-color: themecolor(unfocused_borders);
+  }
+}
+
+// download bar
+.download-box {
+  // FIXME padding don't work here :-/
+  border-style: solid none none;
+  border-width: 1px;
+  border-color: themecolor(borders);
+  &:backdrop { border-color: themecolor(unfocused_borders)};
+}
+
+.download-box .button .filename {
+  &:dir(ltr) { padding-right: 6px; }
+  &:dir(rtl) { padding-left: 6px; }
+}
+
+.download-box .button.needs-attention .filename {
+  animation: needs_attention 150ms ease-in;
+  $_dot_color: $selected_bg_color;
+  $_dot_shadow: _text_shadow_color();
+  $_dot_shadow_r: if($variant=='light',0.5,0.45);
+  background-image: -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, 0.5,
+                                  to($_dot_color),
+                                  to(transparent)),
+                    -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, $_dot_shadow_r,
+                                  to($_dot_shadow),
+                                  to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 4px;
+  &:dir(rtl) { background-position: left 3px, left 4px; }
+  &:backdrop { background-size: 6px 6px, 0 0;}
+}
+
+// incognito mode
+
+//$incognito_color: #c5cfd8;
+$incognito_color: #cbd2d9;
+$incognito_icon: 'user-not-tracked-symbolic';
+$edge_color: lighten($incognito_color, 13%);
+
+.incognito-mode {
+  &.titlebar {
+    @include headerbar_fill($incognito_color, $hc:$edge_color);
+    background-image: -gtk-icontheme($incognito_icon),
+                      headerbar_gradient($incognito_color);
+    background-size: 64px 64px, 100% 100%;
+    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: $fg_color;
+      &:backdrop { color: $backdrop_fg_color }
+    }
+    &:backdrop {
+      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);
+    }
+    .button {
+      @include button(normal, $incognito_color, $edge:$edge_color);
+      &.flat, &.titlebutton { @include button(undecorated); }
+      &.titlebutton {
+        @include _button_text_shadow($fg_color, $incognito_color);
+      }
+      &:hover { @include button(hover, $incognito_color, $edge:$edge_color); }
+      &:active, &:checked, &#ephy-page-menu-button.active-menu {
+        @include button(active, $incognito_color, $edge:$edge_color); }
+      &:insensitive {
+        @include button(insensitive, $incognito_color, $edge:$edge_color); }
+      &:backdrop {
+        @include button(backdrop, $incognito_color, $edge:$edge_color);
+        border-color: _border_color($incognito_color);
+        &:active {
+          @include button(backdrop-active, $incognito_color,
+                          $edge:$edge_color);
+          border-color: _border_color($incognito_color);
+        }
+        &:insensitive {
+          @include button(backdrop-insensitive, $incognito_color,
+                          $edge:$edge_color);
+          border-color: _border_color($incognito_color);
+        }
+      }
+      &.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);
+      }
+      &:backdrop { @include entry(backdrop, $edge:$edge_color); }
+    }
+  }
+}
diff --git a/src/resources/parse-sass.sh b/src/resources/parse-sass.sh
new file mode 100755
index 0000000..3cbe160
--- /dev/null
+++ b/src/resources/parse-sass.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+
+GTK_SOURCE_PATH="../../../gtk+"
+
+sass --sourcemap=none --update -I ${GTK_SOURCE_PATH}/gtk/resources/theme/Adwaita .
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]