Commit 6406d184 authored by Adrián Pérez de Castro's avatar Adrián Pérez de Castro Committed by Michael Catanzaro

Simpler custom CSS theming for non-Adwaita themes

In particular, the theming for the incognito windows tends to look odd
with themes other than Adwaita. It is possible to load different CSS
resources depending on the selected theme by handling changes to the
GtkSettings::gtk-theme-name property: this splits the CSS into a
"shared.css" part which contains the rules which play well with most
themes, and an "Adwaita.css" which builds upon the shared CSS rules
and is loaded only for the Adwaita theme. The CSS code is still
generated from SCSS, with definitions used by SCSS snippets moved
into a new _definitions.scss file to avoid repeating them.

Note that instead of manually handling theme changes, EphyEmbedShell
is changed to inherit from DzlApplication (instead of GtkApplication),
which already implements the desired CSS resource loading behaviour.
This makes the existing CSS loading code unneeded, and therefore it
is removed. Also, the resources are moved into the resource path
/org/gnome/Epiphany/themes as expected by DzlApplication.

https://bugzilla.gnome.org/show_bug.cgi?id=783912
parent 7a55a655
......@@ -96,7 +96,7 @@ static EphyEmbedShell *embed_shell = NULL;
static void ephy_embed_shell_tabs_catalog_iface_init (EphyTabsCatalogInterface *iface);
G_DEFINE_TYPE_WITH_CODE (EphyEmbedShell, ephy_embed_shell, GTK_TYPE_APPLICATION,
G_DEFINE_TYPE_WITH_CODE (EphyEmbedShell, ephy_embed_shell, DZL_TYPE_APPLICATION,
G_ADD_PRIVATE (EphyEmbedShell)
G_IMPLEMENT_INTERFACE (EPHY_TYPE_TABS_CATALOG,
ephy_embed_shell_tabs_catalog_iface_init))
......
......@@ -21,6 +21,7 @@
#pragma once
#include <dazzle.h>
#include <webkit2/webkit2.h>
#include "ephy-downloads-manager.h"
......@@ -34,7 +35,7 @@ G_BEGIN_DECLS
#define EPHY_TYPE_EMBED_SHELL (ephy_embed_shell_get_type ())
G_DECLARE_DERIVABLE_TYPE (EphyEmbedShell, ephy_embed_shell, EPHY, EMBED_SHELL, GtkApplication)
G_DECLARE_DERIVABLE_TYPE (EphyEmbedShell, ephy_embed_shell, EPHY, EMBED_SHELL, DzlApplication)
typedef enum
{
......@@ -49,7 +50,7 @@ typedef enum
struct _EphyEmbedShellClass
{
GtkApplicationClass parent_class;
DzlApplicationClass parent_class;
void (* restored_window) (EphyEmbedShell *shell);
};
......
......@@ -32,6 +32,7 @@ libephyembed_sources = [
]
libephyembed_deps = [
dazzle_dep,
ephymisc_dep,
gio_dep,
glib_dep,
......@@ -40,7 +41,7 @@ libephyembed_deps = [
libsecret_dep,
libsoup_dep,
m_dep,
webkit2gtk_dep
webkit2gtk_dep,
]
libephyembed_includes = include_directories(
......
......@@ -23,6 +23,7 @@ libephywidgets_sources = [
]
libephywidgets_deps = [
dazzle_dep,
ephymisc_dep,
gcr_dep,
gdk_dep,
......@@ -31,7 +32,7 @@ libephywidgets_deps = [
glib_dep,
gtk_dep,
libsoup_dep,
webkit2gtk_dep
webkit2gtk_dep,
]
libephywidgets_includes = include_directories(
......
......@@ -67,6 +67,7 @@ nettle_requirement = '>= 3.2'
webkitgtk_requirement = '>= 2.21.1'
cairo_dep = dependency('cairo', version: '>= 1.2')
dazzle_dep = dependency('libdazzle-1.0', version: '>= 3.28.0')
gcr_dep = dependency('gcr-3', version: '>= 3.5.5')
gdk_dep = dependency('gdk-3.0', version: gtk_requirement)
gdk_pixbuf_dep = dependency('gdk-pixbuf-2.0', version: '>= 2.36.5')
......
......@@ -3000,18 +3000,6 @@ static const char *disabled_actions_for_app_mode[] = { "open",
"new-tab",
"home" };
static void
parse_css_error (GtkCssProvider *provider,
GtkCssSection *section,
GError *error,
gpointer user_data)
{
g_warning ("CSS error in section beginning line %u at offset %u:\n %s",
gtk_css_section_get_start_line (section) + 1,
gtk_css_section_get_start_position (section),
error->message);
}
static gboolean
browse_with_caret_get_mapping (GValue *value,
GVariant *variant,
......@@ -3029,7 +3017,6 @@ ephy_window_constructed (GObject *object)
GAction *action;
GActionGroup *action_group;
GSimpleActionGroup *simple_action_group;
GtkCssProvider *css_provider;
guint i;
EphyEmbedShellMode mode;
EphyWindowChrome chrome = EPHY_WINDOW_CHROME_DEFAULT;
......@@ -3115,17 +3102,6 @@ ephy_window_constructed (GObject *object)
gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (window->notebook));
gtk_widget_show (GTK_WIDGET (window->notebook));
/* Attach the CSS provider to the window. */
css_provider = gtk_css_provider_new ();
g_signal_connect (css_provider,
"parsing-error",
G_CALLBACK (parse_css_error), window);
gtk_css_provider_load_from_resource (css_provider, "/org/gnome/epiphany/epiphany.css");
gtk_style_context_add_provider_for_screen (gtk_widget_get_screen (GTK_WIDGET (window)),
GTK_STYLE_PROVIDER (css_provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
g_object_unref (css_provider);
/* other notifiers */
action_group = gtk_widget_get_action_group (GTK_WIDGET (window), "win");
action = g_action_map_lookup_action (G_ACTION_MAP (action_group),
......
......@@ -8,7 +8,6 @@
<file>network-error-symbolic.png</file>
<file>security-high-symbolic.png</file>
<file compressed="true">about.ini</file>
<file compressed="true">epiphany.css</file>
<file alias="page-templates/about.css" compressed="true">about.css</file>
<file alias="page-templates/error.css" compressed="true">error.css</file>
<file alias="page-templates/error.html" compressed="true">error.html</file>
......@@ -36,4 +35,8 @@
<file compressed="true" alias="scalable/actions/ephy-bookmarks-symbolic.svg">ephy-bookmarks-symbolic.svg</file>
<file compressed="true" alias="scalable/actions/ephy-bookmark-tag-symbolic.svg">ephy-bookmark-tag-symbolic.svg</file>
</gresource>
<gresource prefix="/org/gnome/Epiphany">
<file compressed="true">themes/shared.css</file>
<file compressed="true">themes/Adwaita.css</file>
</gresource>
</gresources>
#!/bin/sh
GTK_SOURCE_PATH="../../../gtk+-3"
: ${GTK_SOURCE_PATH:="../../../gtk+-3"}
sass --sourcemap=none --update -I ${GTK_SOURCE_PATH}/gtk/theme/Adwaita .
sass --sourcemap=none --update -I ${GTK_SOURCE_PATH}/gtk/theme/Adwaita \
"$(dirname "$0")/themes"
button.active-menu {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
background-image: image(#d9d9d7);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.floating-bar {
background-color: @theme_base_color;
border-width: 1px;
border-style: solid solid none;
border-color: @borders;
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; }
@import url("resource:///org/gnome/Epiphany/themes/shared.css");
.incognito-mode.titlebar {
background: #cbd2d9 -gtk-icontheme("user-not-tracked-symbolic") 160px 0/64px 64px no-repeat, linear-gradient(to top, #a5b1bd, #c5cdd5 2px, #cbd2d9 3px);
box-shadow: inset 0 1px #f1f3f5;
......@@ -42,8 +18,8 @@ button.active-menu {
border-color: #909fae;
border-bottom-color: #738698;
background-image: linear-gradient(to bottom, #cbd2d9, #bfc8d0 60%, #aeb9c3);
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.6); }
.incognito-mode.titlebar button.flat, .incognito-mode.titlebar button.titlebutton {
border-color: transparent;
......@@ -53,15 +29,15 @@ button.active-menu {
text-shadow: none;
-gtk-icon-shadow: none; }
.incognito-mode.titlebar button.titlebutton {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); }
.incognito-mode.titlebar button:hover {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #909fae;
border-bottom-color: #738698;
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
background-image: linear-gradient(to bottom, #dde1e6, #cbd2d9 60%, #bfc8d0); }
.incognito-mode.titlebar button:active, .incognito-mode.titlebar button:checked, .incognito-mode.titlebar button#ephy-page-menu-button.active-menu {
......@@ -119,109 +95,3 @@ button.active-menu {
box-shadow: inset 0 0 0 1px #4a90d9; }
.incognito-mode.titlebar entry:backdrop {
box-shadow: none; }
/* Bookmarks */
.titlebar entry.starred image.right {
color: #fce94f; }
.bookmarks-row button {
opacity: 0.25; }
.bookmarks-row:hover button {
opacity: 1; }
.bookmark-tag-widget {
padding-left: 8px;
background-color: #cfcfcd; }
.bookmark-tag-widget label {
padding-left: 8px;
padding-right: 8px; }
.bookmark-tag-widget button {
background: none;
border: none;
box-shadow: none; }
.bookmark-tag-widget button:last-child image {
color: #454f52; }
.bookmark-tag-widget button:last-child:hover image {
border: 1px solid;
border-radius: 3px;
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white;
background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); }
.bookmark-tag-widget button:last-child:active image {
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
background-image: image(#d9d9d7);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.bookmark-tag-widget-selected {
background-color: #4a90d9; }
.bookmark-tag-widget-selected image {
color: white; }
.bookmark-tag-widget-selected label {
color: white; }
.bookmark-tag-widget-selected button:last-child image {
color: white; }
.bookmark-tag-widget-selected button:last-child:hover image {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
.bookmark-tag-widget-selected button:last-child:active image {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
background-image: image(#3180d4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
/* "Press $KEY to exit fullscreen" overlay text */
#fullscreen-popup {
padding: 12px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.65);
color: white; }
@import 'definitions';
// Include base styling.
@import url("resource:///org/gnome/Epiphany/themes/shared.css");
.incognito-mode {
&.titlebar {
@include headerbar_fill($incognito_color, $edge_color, -gtk-icontheme($incognito_icon) 160px 0 / 64px 64px 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), image($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 accordingly
@include button(normal, $incognito_color);
&.flat, &.titlebutton { @include button(undecorated); }
&.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }
&:hover { @include button(hover, $incognito_color); }
&:active, &:checked, &#ephy-page-menu-button.active-menu { @include button(active, $incognito_color); }
&:disabled { @include button(insensitive, $incognito_color); }
&:backdrop {
@include button(backdrop, $incognito_color);
border-color: _border_color($incognito_color);
&:active {
@include button(backdrop-active, $incognito_color);
border-color: _border_color($incognito_color);
}
&:disabled {
@include button(backdrop-insensitive, $incognito_color);
border-color: _border_color($incognito_color);
}
}
&.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
}
entry {
border-color: _border_color($incognito_color);
&:focus {
border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_shadow($selected_bg_color);
}
&:backdrop { box-shadow: none; }
}
}
}
// incognito mode
//$incognito_color: #c5cfd8;
$incognito_color: #cbd2d9;
$incognito_icon: 'user-not-tracked-symbolic';
$edge_color: lighten($incognito_color, 13%);
// utility function/macros and imports from the base GTK+ theme.
@function themecolor($s) {
@return unquote("@" + "#{$s}");
}
$variant: 'light';
@import 'colors';
@import 'drawing';
button.active-menu {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
background-image: image(#d9d9d7);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.floating-bar {
background-color: @theme_base_color;
border-width: 1px;
border-style: solid solid none;
border-color: @borders;
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; }
.incognito-mode.titlebar {
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); }
/* Bookmarks */
.titlebar entry.starred image.right {
color: #fce94f; }
.bookmarks-row button {
opacity: 0.25; }
.bookmarks-row:hover button {
opacity: 1; }
.bookmark-tag-widget {
padding-left: 8px;
background-color: #cfcfcd; }
.bookmark-tag-widget label {
padding-left: 8px;
padding-right: 8px; }
.bookmark-tag-widget button {
background: none;
border: none;
box-shadow: none; }
.bookmark-tag-widget button:last-child image {
color: #454f52; }
.bookmark-tag-widget button:last-child:hover image {
border: 1px solid;
border-radius: 3px;
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
box-shadow: inset 0 1px white;
background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); }
.bookmark-tag-widget button:last-child:active image {
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
border-bottom-color: #91918c;
background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
color: #454f52;
outline-color: rgba(69, 79, 82, 0.3);
border-color: #b6b6b3;
background-image: image(#d9d9d7);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
.bookmark-tag-widget-selected {
background-color: #4a90d9; }
.bookmark-tag-widget-selected image {
color: white; }
.bookmark-tag-widget-selected label {
color: white; }
.bookmark-tag-widget-selected button:last-child image {
color: white; }
.bookmark-tag-widget-selected button:last-child:hover image {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
text-shadow: 0 -1px rgba(0, 0, 0, 0.5435294118);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5435294118);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4955294118);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4955294118);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
.bookmark-tag-widget-selected button:last-child:active image {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
border-bottom-color: #184472;
background-image: linear-gradient(to bottom, #4a90d9, #3986d5 60%, #2a76c6);
text-shadow: 0 -1px rgba(0, 0, 0, 0.5435294118);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5435294118);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
background-image: image(#3180d4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
/* "Press $KEY to exit fullscreen" overlay text */
#fullscreen-popup {
padding: 12px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.65);
color: white; }
@function themecolor($s) {
@return unquote("@" + "#{$s}");
}
$variant: 'light';
@import 'colors';
@import 'drawing';
@import 'definitions';
// menu button fix, yeah this is ugly
......@@ -41,76 +34,17 @@ button.active-menu {
// 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, $edge_color, -gtk-icontheme($incognito_icon) 160px 0 / 64px 64px 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), image($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 accordingly
@include button(normal, $incognito_color);
&.flat, &.titlebutton { @include button(undecorated); }
&.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }
&:hover { @include button(hover, $incognito_color); }
&:active, &:checked, &#ephy-page-menu-button.active-menu { @include button(active, $incognito_color); }
&:disabled { @include button(insensitive, $incognito_color); }
&:backdrop {