[epiphany] Theme fixes and improvements
- From: Michael Catanzaro <mcatanzaro src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany] Theme fixes and improvements
- Date: Fri, 12 Jun 2015 17:14:04 +0000 (UTC)
commit 01d286be7130b07bdc620010c3a898fe67979bbd
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Sat Sep 13 16:32:22 2014 +0200
Theme fixes and improvements
lib/widgets/Makefile.am | 4 +-
lib/widgets/ephy-download-widget.c | 30 ++++--
lib/widgets/totem-glow-button.c | 156 ---------------------------
lib/widgets/totem-glow-button.h | 47 --------
src/Makefile.am | 1 -
src/ephy-window.c | 3 +-
src/epiphany.gresource.xml | 1 -
src/resources/epiphany.css | 209 ++++++++++++++++++++++++------------
src/resources/epiphany.scss | 138 ++++++++++++++++++++++++
src/resources/incognito-tinted.png | Bin 8497 -> 0 bytes
src/resources/parse-sass.sh | 5 +
11 files changed, 305 insertions(+), 289 deletions(-)
---
diff --git a/lib/widgets/Makefile.am b/lib/widgets/Makefile.am
index 8673688..873e979 100644
--- a/lib/widgets/Makefile.am
+++ b/lib/widgets/Makefile.am
@@ -84,9 +84,7 @@ libephywidgets_la_SOURCES = \
ephy-zoom-action.h \
ephy-zoom-action.c \
nautilus-floating-bar.c \
- nautilus-floating-bar.h \
- totem-glow-button.c \
- totem-glow-button.h
+ nautilus-floating-bar.h
libephywidgets_la_CPPFLAGS = \
-I$(top_builddir)/lib \
diff --git a/lib/widgets/ephy-download-widget.c b/lib/widgets/ephy-download-widget.c
index 4069a8d..b9d8bce 100644
--- a/lib/widgets/ephy-download-widget.c
+++ b/lib/widgets/ephy-download-widget.c
@@ -28,7 +28,6 @@
#include "ephy-debug.h"
#include "ephy-embed-shell.h"
#include "ephy-download.h"
-#include "totem-glow-button.h"
#include <glib/gi18n.h>
#include <webkit2/webkit2.h>
@@ -285,13 +284,25 @@ update_popup_menu (EphyDownloadWidget *widget)
}
static void
+start_glowing (EphyDownloadWidget *widget)
+{
+ gtk_style_context_add_class (gtk_widget_get_style_context (widget->priv->button), "needs-attention");
+}
+
+static void
+stop_glowing (EphyDownloadWidget *widget)
+{
+ gtk_style_context_remove_class (gtk_widget_get_style_context (widget->priv->button), "needs-attention");
+}
+
+static void
widget_finished_cb (WebKitDownload *download,
EphyDownloadWidget *widget)
{
widget->priv->finished = TRUE;
update_popup_menu (widget);
update_download_label_and_tooltip (widget, _("Finished"));
- totem_glow_button_set_glow (TOTEM_GLOW_BUTTON (widget->priv->button), TRUE);
+ start_glowing (widget);
}
static void
@@ -311,7 +322,7 @@ widget_failed_cb (WebKitDownload *download,
gtk_widget_set_tooltip_text (GTK_WIDGET (widget), error_msg);
g_free (error_msg);
- totem_glow_button_set_glow (TOTEM_GLOW_BUTTON (widget->priv->button), TRUE);
+ start_glowing (widget);
}
static void
@@ -396,12 +407,6 @@ widget_destination_changed_cb (WebKitDownload *download,
}
static void
-stop_glowing (EphyDownloadWidget *widget)
-{
- totem_glow_button_set_glow (TOTEM_GLOW_BUTTON (widget->priv->button), FALSE);
-}
-
-static void
disconnect_download (EphyDownloadWidget *widget)
{
WebKitDownload *download;
@@ -572,7 +577,7 @@ create_widget (EphyDownloadWidget *widget)
grid = gtk_grid_new ();
gtk_grid_set_column_spacing (GTK_GRID (grid), 6);
- button = totem_glow_button_new ();
+ button = gtk_button_new ();
menu_button = gtk_menu_button_new ();
gtk_menu_button_set_direction (GTK_MENU_BUTTON (menu_button), GTK_ARROW_UP);
@@ -582,6 +587,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 (GTK_LABEL (text)), "filename");
remain = gtk_label_new (_("Starting…"));
smallify_label (GTK_LABEL (remain));
@@ -628,6 +634,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/Makefile.am b/src/Makefile.am
index 597fb8c..0240ccd 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -112,7 +112,6 @@ RESOURCE_FILES = \
resources/epiphany.css \
resources/error.html \
resources/history-dialog.ui \
- resources/incognito-tinted.png \
resources/incognito.png \
resources/missing-thumbnail.png \
resources/overview.html \
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/epiphany.gresource.xml b/src/epiphany.gresource.xml
index 55ee118..0c743cd 100644
--- a/src/epiphany.gresource.xml
+++ b/src/epiphany.gresource.xml
@@ -2,7 +2,6 @@
<gresources>
<gresource prefix="/org/gnome/epiphany">
<file>incognito.png</file>
- <file>incognito-tinted.png</file>
<file preprocess="xml-stripblanks" compressed="true">encoding-dialog.ui</file>
<file preprocess="xml-stripblanks" compressed="true">prefs-dialog.ui</file>
<file preprocess="xml-stripblanks" compressed="true">prefs-lang-dialog.ui</file>
diff --git a/src/resources/epiphany.css b/src/resources/epiphany.css
index 3651634..7c513d8 100644
--- a/src/resources/epiphany.css
+++ b/src/resources/epiphany.css
@@ -1,78 +1,147 @@
-#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, 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; }
.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; }
+
+.download-box {
+ border-style: solid none none;
+ border-width: 1px;
+ border-color: @borders; }
+ .download-box:backdrop {
+ border-color: @unfocused_borders; }
+
+.download-box .button .filename:dir(ltr) {
+ padding-right: 6px; }
+.download-box .button .filename:dir(rtl) {
+ padding-left: 6px; }
-.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 .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; }
-.floating-bar:backdrop {
- background-color: @theme_unfocused_base_color;
- border-color: @unfocused_borders;
-}
+.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: #8d9091; }
+ .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(141, 144, 145, 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, #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; }
+ .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 > .label {
+ color: inherit; }
+ .incognito-mode.titlebar .button:backdrop {
+ color: #8d9091;
+ 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: #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);
+ 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 > .label {
+ 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 {
+ box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px #f1f3f5;
+ border-color: #8192a3; }
+ .incognito-mode.titlebar .entry:focus {
+ border-color: #4a90d9;
+ box-shadow: inset 0 0 0 1px #4a90d9, 0 1px #f1f3f5; }
+ .incognito-mode.titlebar .entry:backdrop {
+ box-shadow: none; }
diff --git a/src/resources/epiphany.scss b/src/resources/epiphany.scss
new file mode 100644
index 0000000..e77c4b7
--- /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); // this is the color of the overlayed icon
+ > * {
+ 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); // color of the overlayed icon in backdrop
+ }
+ .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 {
+ @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 {
+ 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 { box-shadow: none; }
+ }
+ }
+}
diff --git a/src/resources/parse-sass.sh b/src/resources/parse-sass.sh
new file mode 100755
index 0000000..04f67d6
--- /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/theme/Adwaita .
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
