[epiphany] Simpler custom CSS theming for non-Adwaita themes
- From: Michael Catanzaro <mcatanzaro src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany] Simpler custom CSS theming for non-Adwaita themes
- Date: Mon, 30 Apr 2018 15:48:57 +0000 (UTC)
commit 6406d184cd018dd99c5c23b1a31f662cbcb5ab77
Author: Adrian Perez de Castro <aperez igalia com>
Date: Thu Apr 26 12:32:58 2018 +0100
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
embed/ephy-embed-shell.c | 2 +-
embed/ephy-embed-shell.h | 5 +-
embed/meson.build | 3 +-
lib/widgets/meson.build | 3 +-
meson.build | 1 +
src/ephy-window.c | 24 ----
src/resources/epiphany.css | 227 --------------------------------
src/resources/epiphany.gresource.xml | 5 +-
src/resources/epiphany.scss | 210 -----------------------------
src/resources/parse-sass.sh | 5 +-
src/resources/themes/Adwaita.css | 97 ++++++++++++++
src/resources/themes/Adwaita.scss | 69 ++++++++++
src/resources/themes/_definitions.scss | 18 +++
src/resources/themes/shared.css | 137 +++++++++++++++++++
src/resources/themes/shared.scss | 144 ++++++++++++++++++++
15 files changed, 481 insertions(+), 469 deletions(-)
---
diff --git a/embed/ephy-embed-shell.c b/embed/ephy-embed-shell.c
index e39655d..9de657c 100644
--- a/embed/ephy-embed-shell.c
+++ b/embed/ephy-embed-shell.c
@@ -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))
diff --git a/embed/ephy-embed-shell.h b/embed/ephy-embed-shell.h
index 848ac95..08ace57 100644
--- a/embed/ephy-embed-shell.h
+++ b/embed/ephy-embed-shell.h
@@ -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);
};
diff --git a/embed/meson.build b/embed/meson.build
index f53319a..26ce064 100644
--- a/embed/meson.build
+++ b/embed/meson.build
@@ -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(
diff --git a/lib/widgets/meson.build b/lib/widgets/meson.build
index 1c5c849..a425778 100644
--- a/lib/widgets/meson.build
+++ b/lib/widgets/meson.build
@@ -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(
diff --git a/meson.build b/meson.build
index 375b941..2985743 100644
--- a/meson.build
+++ b/meson.build
@@ -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')
diff --git a/src/ephy-window.c b/src/ephy-window.c
index 2bdf442..7868462 100644
--- a/src/ephy-window.c
+++ b/src/ephy-window.c
@@ -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),
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 22a01ec..c11e904 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -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>
diff --git a/src/resources/parse-sass.sh b/src/resources/parse-sass.sh
index ddc3bac..d8d85b0 100755
--- a/src/resources/parse-sass.sh
+++ b/src/resources/parse-sass.sh
@@ -1,5 +1,6 @@
#!/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"
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
new file mode 100644
index 0000000..2086698
--- /dev/null
+++ b/src/resources/themes/Adwaita.css
@@ -0,0 +1,97 @@
+@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;
+ border-color: #909fae;
+ color: rgba(46, 52, 54, 0.2); }
+ .incognito-mode.titlebar > * {
+ color: #2e3436; }
+ .incognito-mode.titlebar > *:backdrop {
+ color: #8b8e8f; }
+ .incognito-mode.titlebar:backdrop {
+ background-image: -gtk-icontheme("user-not-tracked-symbolic"), image(#cbd2d9);
+ box-shadow: inset 0 1px #f1f3f5;
+ color: rgba(139, 142, 143, 0.1); }
+ .incognito-mode.titlebar button {
+ color: #2e3436;
+ outline-color: rgba(46, 52, 54, 0.3);
+ 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.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;
+ background-color: transparent;
+ background-image: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ .incognito-mode.titlebar button.titlebutton {
+ 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.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 {
+ color: #2e3436;
+ outline-color: rgba(46, 52, 54, 0.3);
+ border-color: #909fae;
+ background-image: image(#b9c3cc);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ .incognito-mode.titlebar button:disabled {
+ border-color: #909fae;
+ background-image: image(#d3d9df);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ .incognito-mode.titlebar button:disabled label, .incognito-mode.titlebar button:disabled {
+ color: #8b8e8f; }
+ .incognito-mode.titlebar button:backdrop {
+ border-color: #cbd2d9;
+ background-image: image(#cbd2d9);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+ border-color: #909fae; }
+ .incognito-mode.titlebar button:backdrop label, .incognito-mode.titlebar button:backdrop {
+ color: #8b8e8f; }
+ .incognito-mode.titlebar button:backdrop:active {
+ border-color: #bbc5ce;
+ background-image: image(#bbc5ce);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+ border-color: #909fae; }
+ .incognito-mode.titlebar button:backdrop:active label, .incognito-mode.titlebar
button:backdrop:active {
+ color: #8b8e8f; }
+ .incognito-mode.titlebar button:backdrop:disabled {
+ border-color: #d3d9df;
+ background-image: image(#d3d9df);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+ border-color: #909fae; }
+ .incognito-mode.titlebar button:backdrop:disabled label, .incognito-mode.titlebar
button:backdrop:disabled {
+ color: #999fa4; }
+ .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);
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ .incognito-mode.titlebar entry {
+ border-color: #909fae; }
+ .incognito-mode.titlebar entry:focus {
+ border-color: #4a90d9;
+ box-shadow: inset 0 0 0 1px #4a90d9; }
+ .incognito-mode.titlebar entry:backdrop {
+ box-shadow: none; }
diff --git a/src/resources/themes/Adwaita.scss b/src/resources/themes/Adwaita.scss
new file mode 100644
index 0000000..46842b6
--- /dev/null
+++ b/src/resources/themes/Adwaita.scss
@@ -0,0 +1,69 @@
+@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; }
+ }
+ }
+}
diff --git a/src/resources/themes/_definitions.scss b/src/resources/themes/_definitions.scss
new file mode 100644
index 0000000..05f103d
--- /dev/null
+++ b/src/resources/themes/_definitions.scss
@@ -0,0 +1,18 @@
+// 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';
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
new file mode 100644
index 0000000..08c7927
--- /dev/null
+++ b/src/resources/themes/shared.css
@@ -0,0 +1,137 @@
+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; }
diff --git a/src/resources/themes/shared.scss b/src/resources/themes/shared.scss
new file mode 100644
index 0000000..3b52fa5
--- /dev/null
+++ b/src/resources/themes/shared.scss
@@ -0,0 +1,144 @@
+@import 'definitions';
+
+// 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);
+ }
+}
+
+
+// incognito mode
+.incognito-mode {
+ &.titlebar {
+ 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);
+ }
+}
+
+
+/* Bookmarks */
+.titlebar entry.starred image.right {
+ color: #fce94f;
+}
+
+.bookmarks-row {
+ button {
+ opacity: 0.25;
+ }
+
+ &:hover {
+ button {
+ opacity: 1;
+ }
+ }
+}
+
+$close_button_fg_color: lighten($fg_color, 10%);
+.bookmark-tag-widget {
+ padding-left: 8px;
+ background-color: darken($bg_color, 10%);
+
+ label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ button {
+ background: none;
+ border: none;
+ box-shadow: none;
+
+ &:last-child {
+ image {
+ color: $close_button_fg_color;
+ }
+
+ &:hover {
+ image {
+ border: 1px solid;
+ border-radius: 3px;
+ @include button(normal, $bg_color, $close_button_fg_color);
+ @include button(hover, $bg_color, $close_button_fg_color);
+ }
+ }
+
+ &:active {
+ image {
+ @include button(normal, $bg_color, $close_button_fg_color);
+ @include button(active, $bg_color, $close_button_fg_color);
+ }
+ }
+ }
+ }
+}
+
+.bookmark-tag-widget-selected {
+ background-color: $selected_bg_color;
+
+ image {
+ color: white;
+ }
+
+ label {
+ color: white;
+ }
+
+ button {
+ &:last-child {
+ image {
+ color: white;
+ }
+
+ &:hover {
+ image {
+ @include button(normal, $selected_bg_color, white);
+ @include button(hover, $selected_bg_color, white);
+ }
+ }
+
+ &:active {
+ image {
+ @include button(normal, $selected_bg_color, white);
+ @include button(active, $selected_bg_color, white);
+ }
+ }
+ }
+ }
+}
+
+/* "Press $KEY to exit fullscreen" overlay text */
+#fullscreen-popup {
+ padding: 12px;
+ border-radius: 18px;
+ background: rgba(0, 0, 0, 0.65);
+ color: white;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
